如何在javascript中顯示一個html文件？

Question

我試圖在我的 js 代碼中顯示一個 html 文件。

這是一個普通的 html 文件，我想看。 我已經為此創建了一個 IFRAME，但不知何故我不能更進一步......

這是我的代碼片段：

var controlAddIn = document.getElementById('controlAddIn').src = 'index.html';

所以我要調用的文件是“index.html”。 但它不起作用。

如果我這樣稱呼它：

var controlAddIn = document.getElementById('controlAddIn').srcdoc = '<div><meta charset="UFT-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></div>';

它正在工作，但它很難閱讀......你有什么想法，我現在如何調用我的整個代碼，也是多行的？

Answer 1

如果您像這樣調用，則這兩個文件應該是相同的路徑，否則您調用了正確的路徑

var controlAddIn = document.getElementById('controlAddIn').src = 'index.html';

將此文件保存在 index.html 路徑中並在瀏覽器中打開它

<script type="text/javascript">

function newSite() {


    document.getElementById('myIframe').src = "index.html"
}    
</script>

<input type="button" value="Change site" onClick="newSite()" />
<iframe id="myIframe" src="http://google.com/" ></iframe>

Answer 2

您可以使用 XMLHttp 請求異步獲取此代碼的 Html 文件內容

 function httpGet(theUrl,callback) { var xmlHttp = new XMLHttpRequest(); xmlHttp.open( "GET", theUrl, true ); // false for synchronous request xmlHttp.send( null ); xmlHttp.onreadystatechange = function() { callback(xmlHttp.responseText); }; } var controlAddIn; httpGet("index.html",function(content){ controlAddIn = document.getElementById('controlAddIn').src =content; });