iframe没有显示HTML- With JSFiddle

时间:2013-12-02 04:11:12

标签: javascript jquery html iframe

我正在制作iframe以将HTML字符串显示为网页。但是,我似乎无法做到这一点。

iframe必须显示由JavaScript函数返回的html字符串。此html字符串已从当前运行脚本的HTML页面中提取。

HTML页面:

<body>
    <pre> This is my test page for testing . Check the html Sample below:<br>&lt;BODY&gt;</br>&lt;p&gt;Hello World&lt;/p&gt;<br>&lt;/BODY&gt;</br>HTML sample </pre>
</body>

使用Javascript:

(function(){

    // the minimum version of jQuery we want
    var v = "1.3.2";

    // check for jQuery. if it exists, verify it's not too old.
    if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
        var done = false;
        var script = document.createElement("script");
        script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
        script.onload = script.onreadystatechange = function(){
            if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
                done = true;
                initMyBookmarklet();
            }
        };
        document.getElementsByTagName("head")[0].appendChild(script);
    } else {
        initMyBookmarklet();
    }

    function initMyBookmarklet() {
        (window.myBookmarklet = function() {
            function getSelText() {
                var test = document.body;
                var text = test.textContent;
                var bodyStart="<BODY";
                var bodyEnd="</BODY>";
                var lim1=text.indexOf(bodyStart);
                var lim2=text.indexOf(bodyEnd);
                var printstr=text.substring(lim1-bodyStart.length,lim2+bodyEnd.length);
                return printstr;
            }
            if ($("#wikiframe").length == 0) {
                var s = "";
                s = getSelText();
                if (s == "") {
                    var s = prompt("Forget something?");
                }
                if ((s != "") && (s != null)) {
                    var content = "<html>" + s + "</html>";
                    $("body").append("\
                    <div id='wikiframe'>\
                        <div id='wikiframe_veil' style=''>\
                            <p>Loading...</p>\
                        </div>\
                        <iframe id='wikiIDframe'></iframe>\
                        <style type='text/css'>\
                            #wikiframe_veil { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,.25); cursor: pointer; z-index: 900; }\
                            #wikiframe_veil p { color: black; font: normal normal bold 20px/20px Helvetica, sans-serif; position: absolute; top: 50%; left: 50%; width: 10em; margin: -10px auto 0 -5em; text-align: center; }\
                            #wikiframe iframe { display: none; position: fixed; top: 10%; left: 10%; width: 80%; height: 80%; z-index: 999; border: 10px solid rgba(0,0,0,.5); margin: -5px 0 0 -5px; }\
                        </style>\
                    </div>");
                    $("#wikiIDframe").contents().find('body').append(s); 
                    $("#wikiframe_veil").fadeIn(750);
                }
            } else {
                $("#wikiframe_veil").fadeOut(750);
                $("#wikiframe iframe").slideUp(500);
                setTimeout("$('#wikiframe').remove()", 750);
            }
            $("#wikiframe_veil").click(function(event){
                $("#wikiframe_veil").fadeOut(750);
                $("#wikiframe iframe").slideUp(500);
                setTimeout("$('#wikiframe').remove()", 750);
            });
        })();
    }

})();

这是JSFiddle的链接。 JSFiddle

请有人帮我解决这个问题。 谢谢

0 个答案:

没有答案