ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLで外部ページを導入する方法

HTMLで外部ページを導入する方法

小云云オリジナル: 2018-03-29 16:31:093183ブラウズ

通常、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を使って導入するとページのジャンプは効果がありませんが、アンカーポイントはどうなるのでしょうか？これを知るには試してみる必要があります。
ここで、アンカーポイントに関する知識を追加します。
アンカーポイントは、現在のページの対応する位置にジャンプすることができ、また、他のページの対応する位置にジャンプすることもできます。
アンカーポイントを実装するには 2 つの方法があります。1 つはタグ + name 属性で、もう 1 つはタグの Id 属性を使用します。
詳細は次のとおりです:
a. a タグ + name 属性を使用します

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

「詳細」をクリックして、d39f3d78f2b78439de57b855cdb22445.5e8304ee35d55ad9c18145a21a3f6a74的位置.

b.使用标签的id属性

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

点击”详情”，跳转到d1a8716bbca693382eab805d6bb06c9f的位置.

使用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>          
        <p><img src = "img/photo1.jpg" width="500px"/></p>      
        <iframe src="test1.html" height= "100px" name="leftFrame" scrolling="No"  noresize="noresize"  id="leftFrame"></iframe>
        <p><img src = "img/photo2.jpg"  width="500px"/></p>
        <p><img src = "img/photo3.jpg" width="500px" /></p>
        <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能够以HTML对象来返回iframe中的文档，可以通过所以标准的DOM方法来处理被返回的对象。
在iframe页面中，通过parent定位到父html,可以通过top定位到顶层的html.
同级iframe之间调用，需要先定位到父html，再定位到iframe.
补充点关于锚点的知识，其关键作用的就是连接地址后面加的#detail(detail仅是泛指).如果当前的url为localhost:8080/index.html.那么锚点之后，url应为localhost:8080/index.html#detail
URL地址末尾带有”#”标识符，表示需要跳转到对应的位置。#idName,浏览器会在页面中找到符合”#idName”特点的标签。如果URL中”#”后面跟随的字符在文中找不到，如果是当前页面，那么不跳转，如果是从其它页面跳转过来，则显示页面顶部。
回到页面顶部，除了可以通过JS设置body的scrollTop(0返回到顶部,设置为body的高度,跳转到顶部),另一种方法就是afeaa91bd55797efd28520d87cc51f8c回到顶部5db79b134e9f6b82c0b36e0489ee08ed

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

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

「詳細」をクリックして eb6e57d964924c85bfd31f6428bb2a1d 位置。

a+name アンカーポイントを頻繁に使用する失敗するため、ID を使用してアンカーポイントをバインドすることをお勧めします。

本題に戻りますが、iframe を導入した後、iframe 内の要素をクリックすると、対応する位置を見つけることができますか? ここでは、本来の目的でもある head.html を導入するために iframe を使用します。

それで、私たちが実現したいのは、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>
        <link rel = "import" href = "test1.html"/>
    </head>
    <body>
        <p id = "content"></p>
    </body></html><script>
    var post = document.querySelector("link[rel = &#39;import&#39;]").import;    var con = post.querySelector("p");
    document.querySelector("#content").appendChild(con.cloneNode(true));    var clone = document.importNode(con,true)
    document.querySelector("#content").appendChild(clone)</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 で本文のscrollTop を設定する (0 で先頭に戻り、本文の高さに設定し、先頭にジャンプします) 以外に、1bc638a560374c4df62424f6399d1a3cトップに戻る5db79b134e9f6b82c0b36e0489ee08ed🎜🎜2 . ajax (jquery ロードメソッド) を使用して🎜🎜もう 1 つの方法は、jQuery のロードメソッドを使用してページをロードすることです。 🎜load(url, data, callback); url はロードされる HTML Web ページの URL; data: サーバーに送信されるキー/値; callback: ロードが成功したときのコールバック関数。 🎜rrreee🎜js で追加された DOM 構造は SEO (検索エンジン最適化) に影響を及ぼし、Baidu スパイダーはそれをクロールできません。通常の状況では、最後の手段としてのみ使用することはお勧めできません。 page1.html/page2.html/page3.html には必要な Html フラグメントを記述するだけでロードされます。つまり、page1.html などのページの要素を取得する必要がある場合に使用できます。 setTimeout と組み合わせて、ページが確実に読み込まれるようにします。 🎜

3、使用HTML imports

HTML imports提供了一种在一个HTML文档中包含和重用另一个HTML文档的方法。目前谷歌已经全面支持HTML imports，Opera35版本之后支持，但是FF依旧不支持。(在谷歌的地址栏输入:chrome://flags,启动或禁止一些功能)
尽管目前HTML imports的兼容不是很好，但是我们还是有必要了解其使用方法，W3C已经发布了HTML imports的标准草案，相信后期应该还是会用得比较普遍的。使用HTML imports

<!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>
        <link rel = "import" href = "test1.html"/>
    </head>
    <body>
        <p id = "content"></p>
    </body></html><script>
    var post = document.querySelector("link[rel = &#39;import&#39;]").import;    var con = post.querySelector("p");
    document.querySelector("#content").appendChild(con.cloneNode(true));    var clone = document.importNode(con,true)
    document.querySelector("#content").appendChild(clone)</script>

给出了两种将import进来的html中我们需要的部分插入到当前html.

最后简单介绍document.querySelector和document.querySelectorAll，这两个方法是HTML5在Web API中新引入的方法，大大简化了在原生Javascript代码中选取元素。
document.querySelector和document.querySelectorAll都是接收一个字符串作为参数，这个参数需要符合CSS选择语法，即:标签、类选择器、ID选择器，属性选择器(E[type=”XX”]),结构选择器(:nth-child(n))等。不支持伪类选择器。
document.importNode(node,deep)方法把一个节点从另一个文档复制到该文档以便应用，第二个值为true，那么将该节点的所有子孙节点也复制过来。
node.cloneNode(deep):对已有的节点进行克隆,deep值为true，表示克隆其子孙节点。如果deep为false，则只克隆该节点自身。

除了以上方法外，目前更为主流的一种方式是使用组件化开发。每一部分作为一个组件。

以上がHTMLで外部ページを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLのコードコメントについて次の記事：HTMLのコードコメントについて

続きを見る

HTMLで外部ページを導入する方法

1. iframe の活用

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

3、使用HTML imports

関連記事