Загрузка контента с использованием AJAX, в котором есть теги скрипта - PullRequest
Новая
       3

Загрузка контента с использованием AJAX, в котором есть теги скрипта

1 голос
/ 03 февраля 2011

Что я действительно хочу сделать, так это смоделировать все функции Iframe в моем гаджете windows 7 без междоменных ограничений.Поэтому возможно, что я загружаю полную html-страницу с тегами <html>, <body> и <script> и загружаю все это div / some dom, чтобы все элементы загруженного html отображались,выполняется, как в Iframe.

Я почти уверен, что библиотека для этого действительно существует, но помощь от парней здесь очень надежна, поэтому я пишу на этом форуме.

Спасибо.

Ответы [ 2 ]

2 голосов
/ 14 февраля 2011

самое простое, что можно сделать, это использовать функцию загрузки jquery.ajax, проанализировать данные, получить данные тегов скрипта в другой переменной var, поместить их в функцию javascript eval, где-то на странице, и поместить другие данные, где бы это ни было вам нужно, чтобы новый DOM был вставлен в.

2 голосов
/ 03 февраля 2011

Я понимаю, что вы хотите загрузить всю страницу внутри HTML-элемента, используя Ajax, вы можете это сделать, но это неправильно.Для этого нужно загрузить внешние скрипты или стили. 

<!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) в ту же папку файла, который вы хотите загрузить, иэтот код поможет вам.

Вы можете скачать следующий пример:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...