CODEWITHSUNDEEP
javascriptjqueryajaxiframe
Neeraj
Neeraj

Reputation: 8532

Loading content using AJAX, which has script tags in it

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.

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.

Upvotes: 1

Views: 450

Answers (2)

Titan
Titan

Reputation: 70

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.

Upvotes: 2

Caio
Caio

Reputation: 3215

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.

<!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.

You can download the following example:

enter image description here

Upvotes: 2

Related Questions