如何使用本地外部文件替换innerHTML

Question

如何使用本地外部文件替换innerHTML

3

我正在编写一个Firefox插件，它会在页面顶部添加一个带有各种内容的div。当直接将HTML代码编写到.innerHTML属性中时，我可以更改div的内容...但是这看起来非常混乱，而且很难对代码进行更改。我已经了解了iframes，但似乎不起作用，什么也没有显示，只有一条垂直线。对象标记也不起作用。有人可以帮助我吗？

我的代码：

    var div = document.createElement('div');
    div.id='mainplugindiv';
    div.style.width = '100%';
    div.style.height = '150px';
    div.style.background = '#313192';
    div.style.color = 'white';

    div.innerHTML = "<iframe src=\"test.html\"></iframe>"; //not working

- Janine Polster

也许这可以帮到你... var iframe = document.createElement('iframe'); iframe.src = 'url'; 确保在控制台中检查所需的URL是否被找到。(没有404错误) - Fez Vrasta

4个回答

1

在您的实际代码中，您只是创建了一个div，但没有将其附加到页面上。

您可以使用document.body.appendChild(div)将其附加到body上：

    var div = document.createElement('div');
    div.id='mainplugindiv';
    div.style.width = '100%';
    div.style.height = '150px';
    div.style.background = '#313192';
    div.style.color = 'white';

    div.innerHTML = "<iframe src=\"test.html\"></iframe>";
    document.body.appendChild(div);

编辑：

实际的代码运行良好，我甚至在Firefox中进行了测试，结果相同。如果这不是你的问题，那么也许你需要更具体地说明你得到的结果。

- cнŝdk

提问者并没有将div附加到body的问题。“当我直接将HTML代码编写到.innerHTML属性中时，我可以更改div的内容...但它看起来非常混乱，而且很难对代码进行更改。” - d4rty

它不起作用... 它显示了iframe的框架，但没有内容，无论是我的本地HTML还是其他任何网站（如www.google.de）。 - Janine Polster

@JaninePolster 也许你的路径有问题？ - cнŝdk

不太可能，在这种情况下会出现404错误，就像上面的代码片段一样。但我的是空的。我把测试HTML放在可能是源的每个文件夹中，但仍然... - Janine Polster

1

你可以使用Jquery来实现这个功能。

下面的代码将会把htmlSheet.html中的所有内容加载到你的div元素中。

 $.get("path/path/htmlSheet.html", function (htmlSheet) {
    $("#mainplugindiv").html(htmlSheet);
...
}

执行上述代码后的HTML：

<div id="mainplugindiv">
    //here will be the content of htmlSheet.html
</div>

- d4rty

2

这个问题没有 jQuery 标签，你为什么会建议使用 jQuery？ - cнŝdk

这是一个可能的解决方案。 - d4rty

是的，但我们应该始终尊重OP规范，也许他不需要jquery。 - cнŝdk

0

你需要添加带有 HTML 的元素以在网页上显示。 添加 HTML

    <div id="div1">

    </div>

更新你的Javascript代码

    var div = document.createElement('div');
        div.id='mainplugindiv';
        div.style.width = '100%';
        div.style.height = '150px';
        div.style.background = '#313192';
        div.style.color = 'white';

        div.innerHTML = "<iframe src=\"test.html\"><p>test</p></iframe>"; //not working

        var element = document.getElementById("div1");

        element.appendChild(div);

- Jitendra Tiwari

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pawan Kashyap · Accepted Answer

首先，我们需要创建一个div，然后创建iframe对象。接着，您可以将iframe附加到已创建的div中，再将已创建的div附加到HTML body中。

就是这样。

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    var newDiv, iframe;
    newDiv = document.createElement("div");
    iframe = document.createElement("IFRAME");
    iframe.setAttribute("src", "http://en.wikipedia.org");;
    $(iframe).appendTo($(newDiv));
    $(newDiv).appendTo($('body'));
  });
</script>

<body>
  <p>testing
  </p>
</body>

</html>