如何在 iframe 中加载和执行 jQuery 内容？ [复制]答案

【问题标题】：How to load and execute jQuery content in an iframe? [duplicate]如何在 iframe 中加载和执行 jQuery 内容？ [复制]
【发布时间】：2015-10-30 07:28:52
【问题描述】：

我想加载一个带有动态 html 和脚本的 iframe，然后执行它。在我的 html 文档中，我有这个简单的 iframe 标记：

<iframe></iframe>

还有我的 jQuery 脚本，它在 Document Ready 上加载，应该准备 iframe：

$( document ).ready(function() {
  // Add jQuery lib  
  $('iframe').contents().find('head').append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>)');

  // Add div to body
  $('iframe').contents().find('body').html('<div id="myDiv">Initial</div>');

  // Add script to change div
  $('iframe').contents().find('body').html('<script>$("#myDiv").html("Changed")</script>');
});

上面的 jQuery 脚本应该在 iframe 中执行以下操作：

加载 jQuery 库
在正文中设置一个 div，其中包含一个简单的文本
在 body 中设置一个 jQuery 脚本，在这里我使用一个 jQuery 选择器来更改 div 的内容

但我并没有走得太远，正如控制台窗口所说：

Uncaught SyntaxError: Unexpected token ILLEGAL

这个问题我想知道如何让 iframe 中的脚本将其 div 的文本更改为“已更改”。

我创建了一个jsFiddle。

* 更新 *

我看不出这是Script tag in JavaScript string 的副本，它是关于在javascript 中解析字符串的。我的问题是关于如何在 iframe 中加载动态 html 和 jQuery，然后执行脚本。

【问题讨论】：

为什么不加载DIV里面的内容呢？？
因为它必须隔离在 iframe 中。

标签： javascript jquery iframe

【解决方案1】：

你可以使用srcdoc，并不是所有的浏览器都支持这个

在这个属性中做任何你想做的事情

$( document ).ready(function() {
    console.log($('#myIframe'))
  // Add jQuery lib  
  $('#myIframe').attr('srcdoc', "<!DOCTYPE html>" +
"<html>" +
"<head>" +
  "<meta charset=\"utf-8\">" +
  "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">" +
  "<title><\/title>" +
  "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"><\/script>" +
  "<script>" +
    "$(function () {" +
      "$('body').html('<div id=\"myDiv\">Initial<\/div><button id=\"myButton\">Click to change<\/button>');" +

      "$('#myButton').on('click', function () {" +
        "$('#myDiv').html('Changed');" +
      "});" +
    "})" +
  "<\/script>" +
"<\/head>" +
"<body>" +
"<\/body>" +
"<\/html>")
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="myIframe"></iframe>

【讨论】：

谢谢。但正如你所写，并非所有浏览器都支持它。
如果我包含这个多边形填充，您的解决方案实际上似乎适用于所有主要浏览器：github.com/jugglinmike/srcdoc-polyfill
其实你的代码可以运行良好。您看到的错误是结束 html 标记必须更改为。斜线必须是转义符。