Question

我想用动态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的内容

但是我不会走得太远，正如控制台窗口所说：

未捕获的SyntaxError：意外的标记ILLEGAL

我希望这个问题是知道如何在iframe中获取脚本以将其div的文本更改为＆＃34;更改＆＃34;。

我创建了一个jsFiddle。

*更新*

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

Answer 1

您可以使用srcdoc，而不是所有浏览器都支持此

在这个attr做任何你想做的事情

＆＃13;

$( 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>")
  
  
});

＆＃13;

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

＆＃13;

如何在iframe中加载和执行jQuery内容？

1 个答案: