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，＆lt; base64 encoded html here＆gt;”它应该工作。您可以在此处详细了解此方法，Is it possible to "fake" the src attribute of an iframe?

选项二，是将您的代码发布到服务器，使用php或某些服务器端语言生成临时html文件，返回一个id，然后将iframe的src更改为查看器php文件，返回的id为end将显示它写入服务器的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，读取它，显示它然后删除它。

用jquery尝试你的自我html

3 个答案: