Question

我有3个文件：index.html，header.js和footer.js。

我想知道我是否只能使用一个JS脚本逐行读取HTML文件header.html和footer.html（文件而不是header.js和footer.js）并返回文件的每一行文件.write（'line content'）;？

我没有header.js和footer.js，而是想拥有header.html和footer.html以及一个用于将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 -->

Answer 1

请解释为什么你需要document.write - 这是什么原因？如果内容来自与您要在其上组合的页面相同的站点，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，则需要使用jj页面，使用例如PHP在服务器上转换页面或使用iFrame来保存它们

示例没有框架：

DEMO

<!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>

如何逐行读取HTML文件并使用Javascript返回每行的document.write（）？

1 个答案: