Question

我正在玩jsfiddle / codepen之类的设置。除了javascript之外，一切都很有效。

iframe中的js会应用于父级而不是iframe：/

此处位于jsfiddle

或者在下方查看（虽然它在这里不能正常使用，但只需使用jsfiddle）：

＆＃13;

(function($) {
  function runCode() {

    $('#render-frame').contents().find('head').html('');
    $('#render-frame').contents().find('body').html('');

    var cssValue = $('#csseditor').val();
    var htmlValue = $('#htmleditor').val();
    var jsValue = $('#jseditor').val();

    var styleValue = "<style>" + cssValue + "<\/style>";
    var scriptValue = "<script>" + jsValue + "<\/script>";
    var jqueryfornow = '<script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js"><\/script>';

    var head = $("#render-frame").contents().find("head");
    var content = $("#render-frame").contents().find("body");

    head.append(styleValue);
    head.append(jqueryfornow);
    content.prepend(htmlValue);
    content.append(scriptValue);
  }

  $('#render-frame').ready(runCode);
  $('.run-btn').click(runCode);

}(jQuery));

＆＃13;

.render {
  padding: 15px 0;
}
#render-frame {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: #AAA;
}
.underline {
  text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="htmleditor" placeholder="html" cols="40" rows="10">
  <h1>Test</h1>
</textarea>

<textarea id="csseditor" placeholder="css" cols="40" rows="10">h1 { color: #777; }</textarea>

<textarea id="jseditor" placeholder="js" cols="40" rows="10">(function($) { $('body').append('test'); $('h1').addClass('underline'); }(jQuery));
</textarea>

<button class="run-btn">Run Code</button>

<div class="render">
  <iframe id="render-frame"></iframe>
</div>

＆＃13;

非常感谢任何帮助。

如何防止iframe的js影响父母？

0 个答案: