Question

这是我的Java脚本代码。我想显示存储在content中的HTML字符串，我希望它显示在iframe中，而不是从src网址显示。

我该怎么做。

代码：

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会获得字符串，然后我会将其附加到<html>和<\html>。

我希望content中的这个Html代码显示在iframe中。

我该怎么做。

更新：

请检查这个JS Fiddle链接：我无法弄清楚它为什么不起作用。添加了@mathew建议的更改。

Answer 1

将您的代码作为数据：uri放到 src 属性：

http://en.wikipedia.org/wiki/Data_URI_scheme

Answer 2

扩展eRIZ的答案，如果你有一串html内容“htmlString”和一个id为“wikiframe”的iframe，你可以使用以下片段注入HTML代码：

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

Answer 3

您可以在iframe的文档上使用常用的jquery函数。

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

Answer 4

据我所知，当浏览器支持iframe 不时，您附加到iframe的任何html内容都会显示

将HTML字符串显示为Iframe中的网页

4 个答案: