如何实时向iframe注入HTML、CSS和jQuery

Question

如何实时向iframe注入HTML、CSS和jQuery

3

我正在尝试构建一个HTML、CSS和jQuery（不仅仅是JavaScript）编辑器，并在一个iFrame中显示渲染后的内容。虽然添加HTML、CSS部分很容易，但我无法执行JavaScript部分。

var html = ""; // HTML code
var content = $("#preview").contents().find("body"); // iframe id is 'preview'
content.html(html);

var cssLink = "<style>" + csVal + "</style>"; // cssVal contains css code
var head = $("#preview").contents().find("head");
head.append(cssLink);

var js ='<script>'+jsEditor()+'<\/script>' ; 

// following part is not working
var content = $('#preview').contents();
$content.find('head').append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>' );             
$content.find('body').append(js );

我可以使用window.eval()来执行核心JavaScript，但是对于任何包含的JS库（例如jQuery等），它都无法正常工作。

- Gandalf

除非需要包含一些外部内容，否则不要使用iframes。反正，为什么要使用这种方法呢？只需将其添加到HTML文件或任何你正在做的事情中，而不需要这种混合方法。 - Jonast92

@Jonast92 我认为他正在尝试制作类似于JSFiddle/jsbin等的实时编辑器，因此他无法事先在HTML文件中指定它。 - Rob Schmuecker

重复的问题链接已不存在。 - Cameron Tinker

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dc5 · Accepted Answer

我认为你在这里唯一的问题就是变量命名：

var content = $('#preview').contents();
$content.find('head').append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>' );             
$content.find('body').append(js );

应该是 ($content ==> 内容)

var content = $('#preview').contents();
content.find('head').append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>' );             
content.find('body').append(js );

我稍加修改了您的脚本，只是为html、csVal和来自jsEditor()的结果提供了一些预设值。

在本地服务器上，在Chrome、Safari和Firefox中都可以正常运行：

HTML：

<html>
    <head>
    </head>
    <body>
        <div>Look at your new iFrame</div>
        <iframe id="preview"></iframe>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </body>
</html>

代码（也在HTML主体中）：

$(document).ready(function() {
    var html = "<div>Hello from iframe</div>"; // HTML code
    var content = $("#preview").contents().find("body"); // iframe id is 'preview'

    content.html(html);

    var csVal = "div { color: red; font-size: 40px;}";
    var cssLink = "<style>" + csVal + "</style>"; // cssVal contains css code
    var head = $("#preview").contents().find("head");
    head.append(cssLink);

    var jsCode = "alert('you are in the iframe')";

    var js ='<script>'+jsCode+'<\/script>' ; 

    // following part is not working
    var content = $('#preview').contents();
    content.find('head').append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>' );             
    content.find('body').append(js );
});

在iFrame中生成的源代码：

<html>
    <head>
        <style>
            div {
                color: red;
                font-size: 40px;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    </head>

    <body>
        <div>Hello from iframe</div>
        <script>
            alert('you are in the iframe')
        </script>
    </body>

</html>