Javascript 如何在网页中显示.html文件的内容？_Javascript_Html

Javascript 如何在网页中显示.html文件的内容？

javascript html

Javascript 如何在网页中显示.html文件的内容？,javascript,html,Javascript,Html,我有两个html文件Editor.html和Test.html。我想将Test.html文件的源代码放入Editor.html中的可编辑div中。我可以简单地使用java脚本来实现这一点吗在这种情况下，我会尝试使用iframe。您可以使用window.frames完全获取iframe内容： window.frames['iframe_name'].document.getElementById('div_in_iframe'); 而且你可以像往常一样替换内容通过ajax 该库简化了ajax

我有两个html文件Editor.html和Test.html。我想将Test.html文件的源代码放入Editor.html中的可编辑div中。我可以简单地使用java脚本来实现这一点吗

在这种情况下，我会尝试使用iframe。您可以使用window.frames完全获取iframe内容：

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

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

通过ajax

该库简化了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>


/*图书馆中最简单的方法*/
$（“#myeditable”）.load（“/test.html”）；

还有其他很棒的javascript速记库，如

类似的东西，结合了您想要的任何格式。也就是说，如果您正在寻找一种编写代码的方法，然后单击按钮将内容传递到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>


测验
函数编写器（）
{
var page=document.getElementById（'box'）。值
document.getElementById（'realbox'）.contentWindow.document.body.innerHTML=page
}
/iframe>

您可以使用

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>


var frame=window.frames[“myFrame”].document；
var data=frame.getElementsByTagName（'html'）[0].innerHTML；
document.getElementById（“结果”）.innerHTML=数据；

此代码将有助于获取HTML文件（在本例中为test.HTML）标记中的所有HTML代码

但它不会打印标签本身，因此使用：

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

document.getElementById（“结果”）.innerHTML=”“+data”“；

但是如果可能的话，我建议通过使用Jquery库来使用AJAX。

Jquery加载方法似乎非常相关，但对我来说不起作用。可能是因为我将这些实现为本地web应用程序，而不在服务器上托管页面。本地，如从文件服务器中使用本地Web服务器工作，可以下载很多文件，如apache、wamp等。不需要在Web服务器中托管这些文件。我只想使用一个网页（Editor.html）来显示另一个网页（Test.html）的源代码。单独在客户端难道不可能吗？谢谢你的回复，但我的问题是如何获取另一个文件的源代码进行编辑。在这里，我可以将本地目录中的现有源代码放入“editbox”中吗？不需要在iframe上渲染它。我只想在网页中打开给定的html源代码，就像我们在IDEs中打开文件一样。我找到了一个使用HTML5 FileReader API和javascript的解决方案。谢谢你的回复。。