Html_html/css_WEB-ITnoseで外部ページを導入する方法
通常、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.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 で先頭に戻り、本文の高さに設定し、先頭にジャンプします) 以外に、 トップに戻る
別の方法は、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 の場合、ノードのすべての子孫ノードもコピーされます。
上記の方法に加えて、現在主流となっている方法の 1 つはコンポーネント開発を使用することです。各部分はコンポーネントとして機能します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7530
15
1379
52
82
11
21
76
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
