如何在網頁中顯示 .html 文件的內容？

Question

我有兩個 html 文件 Editor.html 和 Test.html。 我想將 Test.html 文件的源代碼放入 Editor.html 中的內容可編輯 div 中。 我可以簡單地使用java腳本來做到這一點嗎？

Answer 1

在這種情況下，我會嘗試使用 iframe。 用window.frames完全可以獲取iframe內容：

window.frames['iframe_name'].document.getElementById('div_in_iframe');

並且你通常可以替換 like 的內容。

Answer 2

通過阿賈克斯。

jquery庫使 ajax 的工作變得輕松

   <script src="/jquery.min.js"></script>

   <div id="myeditable" contenteditable="true"></div>

  <script type="text/javascript">

   /* the simplest method in the library */
    $("#myeditable").load("/test.html");

   </script>

還有其他很棒的 javascript 速記庫，比如原型

Answer 3

像這樣的東西結合你想要的任何格式都可以做到。 也就是說，如果您正在尋找一種編寫代碼的方法，然后單擊按鈕將內容傳遞給 iframe 以查看結果。

<html>
<head><title>Test</title></head>

    <script>
    function writer()
    {
    var page = document.getElementById('box').value
    document.getElementById('realbox').contentWindow.document.body.innerHTML = page
    }
    </script>
<body>

    <textarea rows ="50%" cols="100%" id='editbox'></textarea>
    <iframe style="background-color: red;" id='realbox' height="100%" width="100%">/iframe>
    <input type="button" onclick="writer()" value="write">

</body>
</html>

Answer 4

您可以使用iframe加載網頁，然后使用 javascript 獲取其 HTML 代碼

<iframe src="test.html" style="display:none;" name="myFrame">
</iframe>
<textarea id="result"></textarea>

和 javascript 是

<script>
var frame = window.frames["myFrame"].document;
var data = frame.getElementsByTagName('html')[0].innerHTML;
    document.getElementById("result").innerHTML = data;
</script>

此代碼將有助於獲取 HTML 文件（在本例中為 test.html）的標記內的所有 HTML 代碼。

但它不會打印標簽本身，所以這樣做使用：

document.getElementById("result").innerHTML = "<HTML>"+data"</HTML>";

但我建議盡可能通過使用 Jquery 庫來使用 AJAX。

如何在網頁中顯示 .html 文件的內容？

問題描述

4 個解決方案

解決方案1
0 2012-05-21 17:57:44

解決方案2
0 2012-05-21 18:13:48

解決方案3
0 2012-05-21 19:17:04

解決方案4
0 2019-06-16 13:59:22

如何在網頁中顯示 .html 文件的內容？

問題描述

4 個解決方案

解決方案1 0 2012-05-21 17:57:44

解決方案2 0 2012-05-21 18:13:48

解決方案3 0 2012-05-21 19:17:04

解決方案4 0 2019-06-16 13:59:22

解決方案1
0 2012-05-21 17:57:44

解決方案2
0 2012-05-21 18:13:48

解決方案3
0 2012-05-21 19:17:04

解決方案4
0 2019-06-16 13:59:22