javascript - 如何将 HTML、CSS 和 jQuery 实时注入(inject)到 iframe-6ren

javascript - 如何将 HTML、CSS 和 jQuery 实时注入(inject)到 iframe

转载作者：行者123 更新时间：2023-11-29 10:46:23

我正在尝试构建一个 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 等

最佳答案

我认为你唯一的问题是你的变量命名:

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 ==> 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>

关于javascript - 如何将 HTML、CSS 和 jQuery 实时注入(inject)到 iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18688469/

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何将 HTML、CSS 和 jQuery 实时注入(inject)到 iframe