javascript - 在 Iframe 中将 HTML 字符串显示为网页

标签 javascript jquery html iframe

这是我的 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> .

我想要这个 Html 代码在 content 中显示在 iframe 中。

我该怎么做。

更新:

请检查此 JS Fiddle 链接:我不明白为什么它不起作用。按照@mathew 的建议添加了更改。

最佳答案

将您的代码作为 data:uri 放到 src 属性上:

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

关于javascript - 在 Iframe 中将 HTML 字符串显示为网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20313101/

相关文章:

javascript - React JS : Explanation of this. props.items.map 功能

JavaScript/jQuery - 如何在父 div 中查找每个未确定类的第一个

jQuery 不适用于同一类别的第二项

Javascript 字符串拆分

javascript - 更好地过滤 meteor 中的表

javascript - 从随机数组中获取

javascript - 将复选框更改上的时间和日期写入文本文件

javascript - 根据选择在文本区域中进行更改

javascript - 如何读取和调试压缩的javascript文件?

javascript - 欧芹图像尺寸验证