在 iframe 中将 HTML 字符串显示为网页答案

【问题标题】：Display HTML String as a web page in a Iframe在 iframe 中将 HTML 字符串显示为网页
【发布时间】：2013-12-01 14:20:10
【问题描述】：

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

我该怎么做。

代码：

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 的建议添加了更改。

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

把你的代码作为 data:uri 放到 src 属性上：

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

【讨论】：

你能给我举个例子吗
如果您打开链接，您将看到一个带有“window.open”的示例。这是您应该尝试的。

【解决方案2】：

扩展 eRIZ 的答案，如果您有一个 html 内容字符串“htmlString”和一个 id 为“wikiframe”的 iframe，您可以使用以下 sn-p 注入 HTML 代码：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

link 请检查一下，我还是想不通它为什么不运行...！！
您的 iframe id 是 wikiIDframe 而不是 wikiframe 所以相应地更改上面的代码。您正在删除 setTimeout 中的 wikiframe div，它是 iframe 的父级，因此您添加的所有内容都将随之删除。您正在为 iframe 和 height 设置 position:fixed 样式的父级百分比，这将为零，因为子级与父级无关，并且其中没有其他块内容来增长父级。这些只是我在那里看到的几个问题中的几个。

【解决方案4】：

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

【讨论】：