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

How to inject HTML, CSS and jQuery in realtime to iframe

本文关键字：jQuery 实时 注入 iframe CSS HTML      更新时间：2023-09-26

我正在尝试构建一个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==>内容）

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>
相关文章：