Html_html/css_WEB-ITnoseで外部ページを導入する方法-htmlチュートリアル-php.cn

Html_html/css_WEB-ITnoseで外部ページを導入する方法

WBOY

リリース： 2016-06-24 11:22:22

オリジナル

1473 人が閲覧しました

通常、Web サイトの head、foot、rightBar (右側のエントリ) は同じであり、コンテンツのこの部分は導入できますが、そうでない場合は、一度変更する必要があると、10 回、20 回も変更する必要があります。、あるいはそれ以上ページが多すぎるのは退屈ですが意味のない作業です。 PHP または JSP を使用すると、この問題は include を使用して簡単に解決できますが、バックエンド言語から切り離した場合、この問題はフロントエンドの観点から解決できるでしょうか?

1. iframe の利用

まず最初に考えられるのは、html5 ではフレームが廃止されましたが、iframe 属性は引き続き使用できます。属性値を 0 に設定するか、いいえの場合は iframe の境界線を削除します。次に、スクロールを「いいえ」に設定します。これは完全に実行可能ですが、サーバー環境で実行することを忘れないでください。

 var frame = document.getElementsByTageName("iframe")[0];    frame.contentWindow.document.XXX方法,    如frame.contentWindow.document.querySelector("#btn");//获取iframe中Id为btn的节点.

ログイン後にコピー

因为此前没有使用iframe来引入头部的经验，考虑到头部通常除了跳转之外，另一个作用应该是定位，在页面较长时，通过点击，准确定位到某处。页面的跳转，使用iframe引入并无影响，那么锚点呢？这个需要试一试才知道。在此，再补充一点关于锚点的知识：锚点可以跳转到当前页面的相应位置，还可以跳转到其它页面的相应位置。实现锚点有两种方式，一种是a标签+name属性，还有一种是使用标签的Id属性。具体如下：a.使用a标签+name属性的方式

ログイン後にコピー

    <a href = "#detail">详情</a>     <a name = "detail"></a>

ログイン後にコピー

「詳細」をクリックするとその場所にジャンプします

b. タグの id 属性を使用します

    <a href = "#detail">详情</a>    <div id = "detail"></div>

ログイン後にコピー

 点击"详情"，跳转到<div id = "detail">的位置.使用a+name的方式经常会出现锚点失效的情况，因此推荐使用id来绑定锚点。言归正传，引入iframe之后，我们能否通过点击iframe中的元素来定位的相应的位置呢，这里，我们使用iframe引入head.html，这也是我最初的目的。因此我们要实现的是:点击iframe的a标签，定位到主Html相应的位置,通过实现发现，单纯通过html是无法实现的，但是借助于JS则可以做到。

ログイン後にコピー

<!doctype html><html lang="en">    <head>    <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->        <meta http-equiv="content-type" content="text/html;charset=utf-8" />        <meta name="Keywords" content="关键词一，关键词二">        <meta name="Description" content="网站描述内容">        <meta name="Author" content="Yvette Lau">        <title>Document</title>        <!--css js 文件的引入-->        <style> #leftFrame{display:block;} </style>    </head>    <body>                  <div><img src = "img/photo1.jpg" width="500px"/></div>              <iframe src="test1.html" height= "100px" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"></iframe>        <div><img src = "img/photo2.jpg" width="500px"/></div>        <div><img src = "img/photo3.jpg" width="500px" /></div>        <p id = "buttom">detail</p>    </body></html><script> window.onload = function(){ var iframe = document.querySelector("#leftFrame"); var bot = iframe.contentWindow.document.querySelector("#bot"); var top = iframe.contentWindow.document.querySelector("#top"); bot.onclick = function(){ document.body.scrollTop = document.body.offsetHeight; }; top.onclick = function(){ document.body.scrollTop = 0; }; };</script>

ログイン後にコピー

iframe 内に id bot と top を持つ要素があります。位置決めは JS を通じて行われます。

メインページでは、iframe.contentWindow を使用して iframe 内のドキュメントを HTML オブジェクトとして返すことができ、返されたオブジェクトはすべての標準 DOM メソッドを通じて処理できます。
iframe ページでは、parent を使用して親 HTML を見つけることができ、top を使用してトップレベルの HTML を見つけることができます。
同じレベルの iframe 間で呼び出す場合は、最初に親 HTML を見つけてから、次に行う必要があります。 iframe を見つけます。
アンカーポイントについての知識を追加します。その重要な機能は、接続アドレスの後に追加される #detail です (詳細は、一般にそれを参照します)。アンカーポイントの場合、URL は localhost:8080/index.html#detail である必要があります
URL アドレスの末尾の「#」識別子は、対応する場所にジャンプする必要があることを示します。 #idName を使用すると、ブラウザはページ上の「#idName」の特性に一致するタグを見つけます。 URLの「#」に続く文字が本文中に見つからない場合、現在のページであればジャンプせず、別のページからジャンプした場合はページの先頭が表示されます。
ページの先頭に戻るには、JS で本文のスクロールトップを設定する (0 で先頭に戻り、本文の高さに設定し、先頭にジャンプします) 以外に、トップに戻る

2. ajax (jquery のロードメソッド) を使用する

別の方法は、jQuery のロードメソッドを使用してページをロードすることです。

load(url, data, callback); url はロードされる HTML Web ページの URL; data: サーバーに送信されるキー/値; callback: ロードが成功したときのコールバック関数。

 $(function(){        $("selector1").load("page1.html");        $("selector2").load("page2.html");        $("selector3").load("page3.html");    });

ログイン後にコピー

js を通じて追加された DOM 構造は SEO (検索エンジン最適化) に影響を及ぼし、Baidu スパイダーはそれをクロールできません。通常の状況では、最後の手段としてのみ使用することはお勧めできません。 page1.html/page2.html/page3.html には必要な Html フラグメントを記述するだけでロードされます。つまり、page1.html などのページの要素を取得する必要がある場合に使用できます。 setTimeout と組み合わせて、ページが確実に読み込まれるようにします。

3. HTML インポートを使用する

HTML インポートは、ある HTML ドキュメントを別の HTML ドキュメントに含めて再利用する方法を提供します。現在、Google は HTML インポートを完全にサポートしていますが、Opera バージョン 35 以降ではサポートされていますが、FF はまだサポートしていません。 (一部の機能を有効または無効にするには、Google のアドレスバーに chrome://flags と入力します)

HTML インポートの現在の互換性はあまり良くありませんが、W3C が HTML の標準草案をリリースしましたので、その使用方法を理解する必要があります。 imports 、将来的にはより一般的に使用されると思います。 HTML インポートを使用すると、インポートされた HTML に必要な部分を現在の HTML に挿入する 2 つの方法が提供されます。

最後に、これら 2 つのメソッドは Web API の HTML5 です。新しく導入されたメソッドにより、ネイティブ Javascript コードでの要素の選択が大幅に簡素化されます。
document.querySelector と document.querySelectorAll はどちらもパラメーターとして文字列を受け取ります。このパラメーターは、CSS 選択構文、つまり、タグ、クラスセレクター、ID セレクター、属性セレクター (E[type="XX"]) 、構造体に準拠する必要があります。セレクター (:nth-child(n)) など。疑似クラスセレクターはサポートされていません。
document.importNode(node,deep) メソッドは、アプリケーションのために別のドキュメントからこのドキュメントにノードをコピーします。2 番目の値が true の場合、ノードのすべての子孫ノードもコピーされます。

node.cloneNode(deep): 既存のノードのクローンを作成します。 deep 値が true の場合、その子孫ノードのクローンを作成することを意味します。 deep が false の場合、ノード自体のみが複製されます。

上記の方法に加えて、現在主流となっている方法の 1 つはコンポーネント開発を使用することです。各部分はコンポーネントとして機能します。