Question

我正在编写一个firefox插件，它在页面顶部添加了一个div，其中包含各种内容。我可以在将html代码直接写入.innerHTML属性时更改div的内容....但它看起来非常混乱，并且很难对代码进行更改。我读过关于iframe的内容，但它似乎没有用，没有显示任何内容，只有一条垂直线。对象标签也不起作用。有人能帮助我吗？

我的代码：

    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

Answer 1

首先我们需要创建一个div，然后创建iframe对象。然后你可以将iframe附加到创建的div中，然后将创建的div附加到Html体中。

在这里，

<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>

Answer 2

你可以使用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>

Answer 3

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

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

＆＃13;

    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);

＆＃13;

修改

实际代码工作正常，我甚至在Firefox中测试它并且它给出了相同的结果，如果这不是你的问题，那么你可能需要更具体地得到你得到的结果。

Answer 4

您需要使用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);

如何用外部（但本地）文件替换innerHTML

4 个答案: