时间戳

首页 > 解决方案 > 如何在 iframe 中编译 html、css 和 js 代码

javascript - 如何在 iframe 中编译 html、css 和 js 代码

问题描述

试图创建一个简单的 jsfiddle 应用程序

在最终结果上 - 单击 iframe 内的按钮应该使标题成为背景silver

这个怎么做？

$('button').on('click', function(){
var ht = $('#ht').val();
var cs = $('#cs').val();
var js = $('#js').val();
var str = $('#frame')[0].innerHTML;
str = str.replace('~ht', ht);
str = str.replace('~cs', cs);
str = str.replace('~js', js);
 $('#frame').attr('src', str);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>RUN</button>
<br><br>
 <textarea id="ht">
 <button>CLICK</button>
 <div class='title'>lorem</div>
 </textarea>
 
 <textarea id="cs">
 .title{
 background:gold;
 }
 </textarea>
 
 <textarea id="js">
 $('button').on('click', function(){
 $('.title').css('background', 'silver');
 });
 </textarea>
 
 <iframe id="frame">
  <!DOCTYPE html>
 <head>
 <style>~st</style>
 </head>
 <body>
 ~ht
 </body>
 </html>
 </iframe>

标签： javascriptjquery

解决方案

您可以使用srcdoc指定要在内嵌框架中显示的页面的 HTML 内容。

编辑

添加<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>在内部<textarea id="ht">，以便 iframe 可以加载jquery和绑定$('button').click。

已更正$('.title').css('background', 'silver');。

stackoverflow fiddle我猜有问题。它不允许我使用</script>. 所以我需要写一些解决方法并使用</ script></html>'.replace('/ scrip', '/scrip');.

现在它按预期工作，单击按钮将改变颜色。

在下面试试。

$('button').on('click', function() {
  var str = '<html><body>~ht</body><style>~cs</style><script>~js</ script></html>'.replace('/ scrip', '/scrip');
 
  str = str.replace('~ht', $('#ht').val());
  str = str.replace('~cs', $('#cs').val());
  str = str.replace('~js', $('#js').val());

  $('#frame').attr('srcdoc', str);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>RUN</button>
<br><br>
<textarea id="ht">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <button>CLICK</button>
  <div class='title'>lorem</div>
</textarea>

<textarea id="cs">
  .title {
    background:gold;
  }
</textarea>

<textarea id="js">
  $('button').on('click', function() {
    $('.title').css('background', 'silver');
  });
</textarea>

<iframe id="frame"></iframe>

推荐阅读