What i really want to do is, simulate all the functionalities of an Iframe in my windows 7 gadget, without the cross-domain restrictions. So is it possible , that I load a full html page, with <html>, <body> and <script> tags, and load all this is a div/some dom, so that all the elements of the loaded html are rendered, executed as in an Iframe.
我真正想做的是，在我的windows 7小工具中模拟Iframe的所有功能，不受跨域限制。我是否可能加载一个完整的html页面，包含、和
I'm pretty sure there does exist a library for the same, but help from guys here is very reliable, hence posting on this forum.
我很确定也有类似的图书馆，但是这里的人的帮助是非常可靠的，因此在这个论坛上发布。
Thanks.
谢谢。
2 个解决方案
#1
2
the easiest thing to do is, use the jquery.ajax load funciton , parse the data, get the script tags data in another var, put this into javascript eval function , somewehre on the page, and put the other data wherever that you need to new DOM to be inserted at.
最简单的方法是使用jquery。ajax load函数，解析数据，将脚本标记数据放入另一个var中，将其放入javascript eval函数中，在页面上的somewehre，并将其他数据放在需要插入新DOM的地方。
#2
2
I understand that you want to load an entire page inside an HTML element using Ajax, you can do it but is wrong. The right thing to do is load external scripts or styles.
我理解您希望使用Ajax在HTML元素中加载整个页面，您可以这样做，但这是错误的。正确的做法是加载外部脚本或样式。
<!doctype html>
<html>
<head>
<script>
(function () {
var _css;
Element.prototype.pullCssJs = function (folder) {
var _length = folder.length;
folder = folder[_length - 1] === "/" ? folder : folder + "/";
if (typeof _css === "undefined") {
// Same
var css = document.createElement ("link");
css.setAttribute ("href", folder + "css.css");
css.setAttribute ("rel", "stylesheet");
css.setAttribute ("type", "text/css");
document.getElementsByTagName("head")[0].appendChild (css);
_css = css;
}
else {
if (_css !== css) {
var head = document.getElementsByTagName("head")[0];
// Same
var css = document.createElement ("link");
css.setAttribute ("href", folder + "css.css");
css.setAttribute ("rel", "stylesheet");
css.setAttribute ("type", "text/css");
head.removeChild (_css);
head.appendChild (css);
_css = css;
}
}
var js = document.createElement ("script");
js.setAttribute ("src", folder + "js.js");
js.setAttribute ("type", "text/javascript");
element.appendChild (js);
}
})();
window.addEventListener ("load", function () {
document.body.addEventListener ("click", function (event) {
var target = event.target;
if (target.nodeName === "A") {
var con = new XMLHttpRequest ();
var href = target.href;
con.open ("GET", href, true);
con.send (null);
con.onreadystatechange = function () {
if (con.readyState === 4) {
if (con.status === 200) {
var element = document.getElementById ("element");
var folder = href.substr (0, href.lastIndexOf ("/"));
element.innerHTML = con.responseText;
element.pullCssJs (folder);
}
else {
alert ("Error");
}
}
}
event.preventDefault ();
}
}, false);
}, false);
</script>
<style>
#element {
border: 1px solid black;
margin: 20px;
padding: 20px;
}
</style>
<title></title>
</head>
<body>
<a href = "folder1/index.htm">Call folder1/index.htm</a> <br />
<a href = "folder2/index.htm">Call folder2/index.htm</a> <br />
<a href = "folder3/index.htm">Call folder3/index.htm</a>
<div id = "element"></div>
</body>
</html>
Just put the style (css.css) and the script (js.js) in the same folder of the file you want to load and this code will do the trick.
只需将样式(css.css)和脚本(js.js)放在您想要加载的文件的同一个文件夹中，这段代码就可以做到这一点。
You can download the following example:
你可以下载以下例子:
#1
2
the easiest thing to do is, use the jquery.ajax load funciton , parse the data, get the script tags data in another var, put this into javascript eval function , somewehre on the page, and put the other data wherever that you need to new DOM to be inserted at.
最简单的方法是使用jquery。ajax load函数，解析数据，将脚本标记数据放入另一个var中，将其放入javascript eval函数中，在页面上的somewehre，并将其他数据放在需要插入新DOM的地方。
#2
2
I understand that you want to load an entire page inside an HTML element using Ajax, you can do it but is wrong. The right thing to do is load external scripts or styles.
我理解您希望使用Ajax在HTML元素中加载整个页面，您可以这样做，但这是错误的。正确的做法是加载外部脚本或样式。
<!doctype html>
<html>
<head>
<script>
(function () {
var _css;
Element.prototype.pullCssJs = function (folder) {
var _length = folder.length;
folder = folder[_length - 1] === "/" ? folder : folder + "/";
if (typeof _css === "undefined") {
// Same
var css = document.createElement ("link");
css.setAttribute ("href", folder + "css.css");
css.setAttribute ("rel", "stylesheet");
css.setAttribute ("type", "text/css");
document.getElementsByTagName("head")[0].appendChild (css);
_css = css;
}
else {
if (_css !== css) {
var head = document.getElementsByTagName("head")[0];
// Same
var css = document.createElement ("link");
css.setAttribute ("href", folder + "css.css");
css.setAttribute ("rel", "stylesheet");
css.setAttribute ("type", "text/css");
head.removeChild (_css);
head.appendChild (css);
_css = css;
}
}
var js = document.createElement ("script");
js.setAttribute ("src", folder + "js.js");
js.setAttribute ("type", "text/javascript");
element.appendChild (js);
}
})();
window.addEventListener ("load", function () {
document.body.addEventListener ("click", function (event) {
var target = event.target;
if (target.nodeName === "A") {
var con = new XMLHttpRequest ();
var href = target.href;
con.open ("GET", href, true);
con.send (null);
con.onreadystatechange = function () {
if (con.readyState === 4) {
if (con.status === 200) {
var element = document.getElementById ("element");
var folder = href.substr (0, href.lastIndexOf ("/"));
element.innerHTML = con.responseText;
element.pullCssJs (folder);
}
else {
alert ("Error");
}
}
}
event.preventDefault ();
}
}, false);
}, false);
</script>
<style>
#element {
border: 1px solid black;
margin: 20px;
padding: 20px;
}
</style>
<title></title>
</head>
<body>
<a href = "folder1/index.htm">Call folder1/index.htm</a> <br />
<a href = "folder2/index.htm">Call folder2/index.htm</a> <br />
<a href = "folder3/index.htm">Call folder3/index.htm</a>
<div id = "element"></div>
</body>
</html>
Just put the style (css.css) and the script (js.js) in the same folder of the file you want to load and this code will do the trick.
只需将样式(css.css)和脚本(js.js)放在您想要加载的文件的同一个文件夹中，这段代码就可以做到这一点。
You can download the following example:
你可以下载以下例子: