1

index.html、header.js、footer.js の 3 つのファイルがあります。

JS スクリプトを 1 つだけ使用して、HTML ファイルの header.html と footer.html (header.js と footer.js の代わりにファイル) を 1 行ずつ読み取り、ファイルの各行に対して document.write( '行の内容');?

header.js と footer.js の代わりに、 header.html と footer.html と、HTML を JS ファイルに変換するための 1 つの 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 -->
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 などを使用してページを変換するか、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>
于 2013-01-22T10:29:04.257 に答える