Question

单击按钮时，我正在尝试将<div>内容更改为外部HTML文件的内容。如果我可以将其更改为外部HTML文件的特定<div>，那就更好了，但是，小步骤。

我知道我想用ajax或jQuery做的事情会更容易，但我希望在解决这些问题之前能够在Javascript，HTML和CSS中获得坚实的基础。

问题是我无法弄清楚如何在不返回直接网址的情况下指向test.html中的内容：

allCalcs.html：

<!DOCTYPE html>
  <head>
      <title>Toying with iFrames</title>
  </head>
  <body>
      <script src="allCalcs.js"></script>
        <a href="#" id="Home" onclick="showCalc()">Home</a>

        <div id="content">currently unchanged</div>

        <iframe frameborder="0" id="testFrame" scrolling="no" allowtransparency="true" style="left:0px; top:0px; width:100%; height:1px" src="test.html">
        content inside the iframe that shouldn't display instead of test.html
        </iframe>
  </body>
</html>

allCalcs.js

//this should make something appear below the clicky
function showCalc(){
  iFrameName = document.getElementById("testFrame");
  iFrameName.style.display="block";
  document.getElementById("content").innerHTML=iFrameName.innerHTML;
}

的test.html

This is test.html

编辑：将function show()修改为以下内容，尝试使用iframe.contentDocument.body.innerHTML拉取iframe的内容时，它仍无法正常工作： EDIT2：以下工作正常，但仅当文件托管在Web服务器上时才有效。它不会在本地工作。

function show()
{
    var iframe= document.getElementById("testFrame");
    var iframe_contents = iframe.contentDocument.body.in‌nerHTML;
    document.getElementById("content").innerHTML= iframe_contents;
}

使用隐藏的iFrame来更改<div>的innerHTML

0 个答案: