1

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

我想知道是否可以只使用一个 JS 脚本逐行读取 HTML 文件 header.html 和 footer.html（文件而不是 header.js 和 footer.js）并为文件的每一行返回 document.write( '行内容');?

而不是 header.js 和 footer.js 我想要 header.html 和 footer.html 以及一个用于将 HTML 转换为 JS 文件的 JS 文件：header.html 转换为 header.js。

索引.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 -->');

页脚.js

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

最后 index.html 将如下所示：

索引.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 -->

页脚.html

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

1 回答 1

0

请解释为什么需要 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，则需要将页面 ajax 插入，使用例如 PHP 转换服务器上的页面或使用 iFrames 来保存它们

没有框架的例子：

演示

<!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>
于 2013-01-22T10:29:04.257 回答