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

你可以像往常一样替换内容。

Answer 2

通过ajax。

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速记库，如prototype

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 个答案: