最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Display HTML String as a web page in a Iframe - Stack Overflow

programmeradmin1浏览0评论

Here's my Java script code. I want to display my HTML string which is stored in content, I want this to be displayed in the iframe instead it displaying from the src url.

How do I do it.

Code:

if ($("#wikiframe").length == 0) {
                var s = "";
                s = getSelText();
                var content = "<html>" + s + "</html>";
                if (s == "") {
                    var s = prompt("Forget something?");
                }
                if ((s != "") && (s != null)) {
                    $("body").append("\
                    <div id='wikiframe'>\
                        <div id='wikiframe_veil' style=''>\
                            <p>Loading...</p>\
                        </div>\
                        <iframe src='???' onload=\"$('#wikiframe iframe').slideDown(500);\">Enable iFrames.</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>");
                    $("#wikiframe_veil").fadeIn(750);
                }
            }

getSelText would get the string and then I am appending it with <html> and <\html>.

I want this Html code in content to be displayed in the iframe.

How do I do it.

UPDATE:

Please check this JS Fiddle link : I can't figure out why its not working . Added changes as suggested by @mathew.

Here's my Java script code. I want to display my HTML string which is stored in content, I want this to be displayed in the iframe instead it displaying from the src url.

How do I do it.

Code:

if ($("#wikiframe").length == 0) {
                var s = "";
                s = getSelText();
                var content = "<html>" + s + "</html>";
                if (s == "") {
                    var s = prompt("Forget something?");
                }
                if ((s != "") && (s != null)) {
                    $("body").append("\
                    <div id='wikiframe'>\
                        <div id='wikiframe_veil' style=''>\
                            <p>Loading...</p>\
                        </div>\
                        <iframe src='???' onload=\"$('#wikiframe iframe').slideDown(500);\">Enable iFrames.</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>");
                    $("#wikiframe_veil").fadeIn(750);
                }
            }

getSelText would get the string and then I am appending it with <html> and <\html>.

I want this Html code in content to be displayed in the iframe.

How do I do it.

UPDATE:

Please check this JS Fiddle link : I can't figure out why its not working . Added changes as suggested by @mathew.

Share Improve this question edited Dec 1, 2013 at 15:40 rahul888 asked Dec 1, 2013 at 14:20 rahul888rahul888 4132 gold badges9 silver badges18 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 4

Put your code as data:uri onto src attribute:

http://en.wikipedia/wiki/Data_URI_scheme

Expanding on eRIZ's answer, if you have a string of html content "htmlString" and an iframe with the id of "wikiframe" you can inject the HTML code with the following snippet:

$('#wikiframe').attr('src','data:text/html;charset=utf-8,' + encodeURIComponent(htmlString));

You can use usual jquery functions on iframe's document.

$("body").append("<iframe id='wikiframe'></iframe>");
var s = getSelText();
$("#wikiframe").contents().find('body').append(s); 

As far as I know, any html content you append to an iframe gets displayed when the iframe is NOT supported by the browser

发布评论

评论列表(0)

  1. 暂无评论