将一个 HTML 文件加载到另一个
Posted
技术标签:
【中文标题】将一个 HTML 文件加载到另一个【英文标题】：load one HTML file into another 【发布时间】：2017-08-18 03:27:27 【问题描述】：我正在尝试中。
index.html
<!DOCTYPE html>
<html>
<body>
<div id="default"></div>
<script src="index.js"></script>
</body>
</html>
我发现这个 js 代码可以使用，但不是使用按钮单击，我希望读取文件并将其传递给 innerHTML onload
index.js
window.onload = function()
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e)
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType))
var reader = new FileReader();
reader.onload = function(e)
fileDisplayArea.innerText = reader.result;
reader.readAsText(file);
else
fileDisplayArea.innerText = "File not supported!"
);
谢谢，这里还需要window.onload = function()吗？
【问题讨论】：
我不想使用 jquery 我怎么能像上面的例子一样使用 javascript FileReader 来做到这一点。在上面的示例代码中，我唯一需要更改的是，我希望直接从指定的文件夹/目录中读取文件，而不是使用输入单击来上传文件！我更喜欢使用 javascript，以便我可以进行后端编码以动态修改所有内容。 与Include another HTML file in a HTML file重复 这能回答你的问题吗？ Include another HTML file in a HTML file 【参考方案1】：在 html 中，您可以使用 iframe 将其他 html 文件加载到一个 html 文件中
<!DOCTYPE html>
<html>
<body>
<iframe src="header.html">
<p> display</p>
</iframe>
</body>
</html>
或者您可以参考这些社区链接
How to include an HTML page into another HTML page without frame/iframe?
Insert one HTML file into another HTML file
没有 iframe 试试这个 为您的 div 提供 id
document.getElementById("your div id").innerHTML='<object type="text/html" data="home.html" ></object>';
【讨论】：
真的不想使用 iframe，而只想处理标准的 javascript以上是关于将一个 HTML 文件加载到另一个的主要内容，如果未能解决你的问题，请参考以下文章