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

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

javascript html

Javascript 如何用外部（但本地）文件替换innerHTML,javascript,html,Javascript,Html,我正在编写一个firefox插件，它在页面顶部添加了一个div，其中包含各种内容。我可以在将html代码直接写入.innerHTML属性时更改div的内容。。。。但它看起来非常混乱，很难对代码进行更改。我读过有关iFrame的文章，但它似乎不起作用，只显示了一条垂直线。对象标记也不起作用。有人能帮我吗我的代码： var div = document.createElement('div'); div.id='mainplugindiv'; div.style.wid

我正在编写一个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

var div=document.createElement（'div'）；
div.id='mainplugindiv'；
div.style.width='100%'；
div.style.height='150px'；
div.style.background='#313192'；
div.style.color='白色'；
div.innerHTML=“”//不起作用

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


//下面是htmlSheet.html的内容

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

var div=document.createElement（'div'）；
div.id='mainplugindiv'；
div.style.width='100%'；
div.style.height='150px'；
div.style.background='#313192'；
div.style.color='白色'；
div.innerHTML=“test”//不起作用
var元素=document.getElementById（“div1”）；
元素。子元素（div）；

首先，我们需要创建一个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>


$（文档）.ready（函数（）{
var newDiv，iframe；
newDiv=document.createElement（“div”）；
iframe=document.createElement（“iframe”）；
setAttribute（“src”http://en.wikipedia.org");;
$（iframe）.appendTo（$（newDiv））；
$（newDiv）.appendTo（$（'body'）；
});
测试

在实际代码中，您只是创建一个div，而不是将其附加到页面上

您可以使用

document.body.appendChild（div）

将其附加到正文中：

var div=document.createElement（'div'）；
div.id='mainplugindiv'；
div.style.width='100%'；
div.style.height='150px'；
div.style.background='#313192'；
div.style.color='白色'；
div.innerHTML=“”；
文件.正文.附件（div）也许这有帮助<代码>变量iframe=document.createElement（'iframe'）；iframe.src='url'确保在控制台中检查是否找到所需的URL。（没有404个错误）这个问题没有jquery标记，为什么建议使用jquery？实际上我只是想显示工作流程。如何用外部文件替换内部html。如果不想使用jQuery。让我们试试这个。函数apendIframe（）{var newDiv，iframe；newDiv=document.createElement（“div”）；iframe=document.createElement（“iframe”）；iframe.setAttribute（“src”，”；newDiv.innerHTML=iframe.outerHTML；document.body.appendChild（newDiv）；}测试
我的问题是，我没有访问源html页面的权限。因此它必须放在我的.js文件中。这个问题没有jquery标记，为什么你会建议使用jquery？这是一个可能的解决方案。是的，但我们应该始终尊重OP规范，也许他不需要jquery。提问者没有这个问题在将html代码直接写入.innerHTML属性时，我可以更改div的内容。。。。但它看起来很凌乱，很难对代码进行修改。“它不工作……它显示了iframe的框架，但没有内容，不适用于我的本地html或任何其他内容（如www.google.de）@JaninePolster也许你的路径有问题？不太可能，在这种情况下会出现404，就像上面的代码片段一样..但我的是空的。我把测试html放在每个文件夹中，可能是源文件，但仍然。。。