用jquery试试你自己的html

Question

我正在w3school中尝试一下，我需要帮助。这就是我目前所处的位置：

<input value="Update page" type="button">
  <textarea id="mycode"></textarea>
  <iframe id="display"></iframe>
another tryityourself:
  <input value="Update page" type="button">
    <textarea id="mycode"></textarea>
    <iframe id="display"></iframe>
$(document).ready(function() {
  $('input:button').on('click', function() {
  var x = $(this).next().val();
frames['display'].document.documentElement.innerHTML = x;
  });
});
but what i want is the html will show in the iframe near the closest textarea.
i hope you understand what i mean.
please help me.

Answer 1

您需要稍微重组标记，并使用jQuery访问iFrame。我把你的代码重新编写成一个函数示例。请注意使用类而不是id。

您可以使用标准jQuery:操作iFrame的内容

<div class="codeFrame">
    <input value="Update page" type="button">
    <textarea class="mycode"></textarea>
    <iframe class="display"></iframe>
</div>
<div class="codeFrame">
    <input value="Update page" type="button">
    <textarea class="mycode"></textarea>
    <iframe class="display"></iframe>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('input:button').on('click', function() {
            var codeFrame = $(this).parent('.codeFrame');
            codeFrame.children('iframe').contents().find('body').html(codeFrame.children('textarea').val());
        });
    });
</script>

Answer 2

在HTML中，id必须是唯一的。不能有多个元素具有相同的id，这就是您对多个iframe所做的。您需要给每个iframe一个唯一的id，并在javascript中引用相应的id。

Answer 3

在我的脑海中，有两种方法可以解决这个问题。第一种方法是将代码作为字符串，使用base64进行编码，然后将iframe src设置为"data:text/html，<base64 encoded html-here>"，它应该可以工作。你可以在这里阅读更多关于这种方法的信息，有可能吗；假的"；iframe的src属性？

选项二，是将代码发布到服务器，使用php或某些服务器端语言生成一个临时html文件，返回一个id，然后将iframe的src更改为查看器php文件，该文件的末尾将显示它写入服务器的html文件，然后删除它以保持文件系统的清洁。

例如，您的浏览器发出ajax请求以形成post-domain_a.com/postform.php，postform.php将html的内容写入1.html并将1返回给您的javascript，然后您的javascript将iframe的src设置为domain_a.com/viewhtml.php？id=1，其中viewhtml.php将打开1.html，读取它，显示它，然后删除它。