Question

我真正想要做的是，在我的Windows 7小工具中模拟Iframe的所有功能，而不受跨域限制。因此，我可以使用<html>，<body>和<script>标记加载完整的html页面，并加载所有这些是div / some dom，以便所有元素加载的html将被渲染，像在iframe中一样执行。

我很确定确实存在相同的库，但是来自这里的人的帮助是非常可靠的，因此在这个论坛上发布。

感谢。

Answer 1

我知道您希望使用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>

只需将样式（css.css）和脚本（js.js）放在要加载的文件的同一文件夹中，此代码即可。

You can download the following example:

enter image description here

Answer 2

最简单的事情是，使用jquery.ajax加载函数，解析数据，在另一个var中获取脚本标签数据，将其放入javascript eval函数，一些在页面上，并将其他数据放在任何地方你需要插入新的DOM。

使用AJAX加载内容，其中包含脚本标记

2 个答案: