我怎样才能逐行读取HTML文件，并用Javascript为每一行返回document.write() ?

How can I read line by line an HTML file and return document.write() for each line with Javascript?

本文关键字：一行 write document 返回 Javascript 逐行 读取 并用 文件 HTML      更新时间：2023-09-26

我有3个文件:index.html, header.js和footer.js.

我想知道我是否可以使用一个JS脚本逐行读取HTML文件header.html和footer.html(文件而不是header.js和footer.js)并返回文件的每一行文档。写("行内容");?

而不是有header.js和footer.js我想有header.html和footer.html和一个JS文件转换成JS文件:header.html转换成header.js.

index . html 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript" src="header.js"></script>
<!-- CONTENT -->
<div id="content">
<h1>Title</h1>
<h2>Substitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- END OF CONTENT -->
<script type="text/javascript" src="footer.js"></script>
</body>
</html>

header.js 

document.write('<!-- HEADER -->');
document.write('<div id="header">HEADER</div>');
document.write('<!-- END OF HEADER -->');

footer.js 

document.write('<!-- FOOTER -->');
document.write('<div id="footer">FOOTER</div>');
document.write('<!-- END OF FOOTER -->');

最后index.html看起来像这样:

index . html 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript" src="include.js?file=header.html"></script>
<!-- CONTENT -->
<div id="content">
<h1>Title</h1>
<h2>Substitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- END OF CONTENT -->
<script type="text/javascript" src="include.js?file=footer.html"></script>
</body>
</html>

其余的文件看起来像这样:

header.html 

<!-- HEADER -->
<div id="header">HEADER</div>
<!-- END OF HEADER -->

footer.html 

<!-- FOOTER -->
<div id="footer">FOOTER</div>
<!-- END OF FOOTER -->

请解释你为什么需要文件。写——真正的原因是什么?如果内容来自您想要在

上组装的页面的同一站点，则jQuery可以轻松抓取内容并插入到页面上。例如

$(function() {
  var $body = $("body");
  $.get("header.html",function(data) {
    $body.prepend(data);
  });
  $.get("footer.html",function(data) {
    $body.append(data);
  });
});

会使你的页面看起来像这样

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="include.js"></script>
</head>
<body>
<!-- CONTENT -->
<div id="content">
<h1>Title</h1>
<h2>Substitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- END OF CONTENT -->
</body>
</html>

其中include.js看起来像我上面发布的

如果你不想使用jQuery，你将需要ajax页面，转换你的页面在服务器上使用例如PHP或使用iframe来保存它们

没有框架的示例:

演示
<!DOCTYPE HTML>
<html>
<head>
<title>Test header footer insertion without jQuery</title>
<script>
var pages = [
{url:"header.html",tag:"body",where:"before"},
{url:"footer.html",tag:"body",where:"after"}
];
var req,cnt = pages.length;
function ajax_fragment(){
    cnt--; if (cnt<0) return;
    if (!req) { // singleton
      if (window.XMLHttpRequest){
          req=new XMLHttpRequest(); 
      } else{ 
          req=new ActiveXObject("Microsoft.XMLHTTP"); 
      }
    }
    req.onreadystatechange=function(){
        if(req.readyState==4 && req.status==200){
            var tempDiv = document.createElement("div");       
            tempDiv.innerHTML = req.responseText; 
            var fragment = document.createDocumentFragment();  
            fragment.appendChild(tempDiv);                     
            var tag = document.getElementsByTagName(pages[cnt].tag)[0]; 
            if (pages[cnt].where=="before") tag.insertBefore(fragment, tag.firstChild);
            else tag.appendChild(fragment);
            ajax_fragment(); // next 
        }
    }
    req.open("GET",pages[cnt].url,true); 
    req.send();
}
window.onload=function() {
  ajax_fragment();
}
</script>
</head>
<body>
<div id="content">Here is some content</div>
</body>
</html>
相关文章：