🎐 🤛🏻 🥘 クロスブラウザーHTMLインクルード\（^

簡単なhtmlchik index1.htmを用意しましょう

<! DOCTYPE html > < html > < head > < title > Xbrowser HTML includes </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> </ head > < body > < h1 > First file </ h1 > </ body > </ html >

ご存じのように、htmlはiframe / objectを介してのみ包含をサポートしますが、javascriptからそれらを操作するのはあまり便利ではありません。

もちろん、次のようなスクリプトを書くことができます

new function (){ var frame= window.frameElement if ( !frame ) return var parent= frame.parentNode var body= document .getElementsByTagName( 'body' )[0] var child; while ( child= body.firstChild ) parent.insertBefore( child, frame ) parent.removeChild( frame ) }

その内容を親ドキュメントに転送し、フレームを削除します。ただし、javascriptが無効になっている場合、コンテンツのサイズに調整されないiframeウィンドウが表示されます。

興味深い機能がXHTML2に登場しました-src属性は任意の要素に設定でき、要素のコンテンツの代わりに、それが指すドキュメントのコンテンツが設定されます。 index2.htmを書きましょう

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd" > < html > < head > < title > Xbrowser HTML includes </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> </ head > < body > < h1 > Second file </ h1 > < div src ="index1.xml" srctype ="text/xml" > < a href ="index1.xml" > link 2 first file </ a > </ div > </ body > </ html >

チェック済み-機能しません。あなたは再び無効にすることができますjavascriptの助けを借りてそれを復活させることができますが、これはそれほど致命的ではありません-ユーザーは接続されたファイルへのリンクが表示されます。

ただし、JavaScriptを使用せずに済みます。そして、それ自体に重ねられたxsl変換はこれに役立ちます。 index2.xmlを書きましょう。これは、特別な魔法のラッパーに包まれたindex.htmにすぎません。

<! DOCTYPE t:stylesheet [ <! ATTLIST t:stylesheet id ID # REQUIRED > ] > <? xml-stylesheet type ="text/xsl" href ="#t:stylesheet" ? > < t:stylesheet id ="t:stylesheet" version ="1.0" xmlns:t ="http://www.w3.org/1999/XSL/Transform" > < t:output method ="html" doctype-public ="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system ="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" /> < t:template match =" @* | node() " > < t:copy > < t:apply-templates select =" @* | node() " /> </ t:copy > </ t:template > < t:template match =" / " > < t:apply-templates select =" document( '#t:stylesheet' )//html " /> </ t:template > < t:template name ="content" > < html > < head > < title > Xbrowser HTML includes </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> </ head > < body > < h1 > Second file </ h1 > < div src ="index1.htm" srctype ="text/xml" > < a href ="index1.htm" > link 2 first file </ a > </ div > </ body > </ html > </ t:template > </ t:stylesheet >

ここでDoctypeは2つの機能を実行します：

1. xmlプロセッサに、t：スタイルシートのid属性が識別子であることを伝えます。これにより、xsl変換を指定するときに使用できます。

2.ドキュメントがtext / htmlとして指定されている場合、ブラウザは引き続き標準のコンプライアンスモードでページをレンダリングします。 t：出力では、ドキュメントがxmlとして指定され、xsltがそれ自体をhtmlに変換した場合のみ、同じ理由でdoctypeを作成します。

最初のテンプレートはすべてのノードに一致し、それらを再帰的にコピーします。 2番目はルートへのマトリックスで、xsltタグをスキップして、すぐにhtml出力に進みます。最後のルールには、含まれるHTMLが含まれています。彼の名前は関係ありません。

ブラウザでこれをチェックすると、違いはないはずです。ただし、別のパターンを追加すると、インクルージョンが突然機能します。

< t:template match =" *[ @src and contains( @srctype, 'xml' ) ] " > < t:copy > < t:apply-templates select =" @* " /> < t:apply-templates select =' document( @src )//html/body/* ' /> </ t:copy > </ t:template >

この方法では、index2.xml型のxmlとindex1.htm型のhtmlの両方を含めることができることに注意してください

index2.xmlを含むindex3.xmlを作成します

<! DOCTYPE t:stylesheet [ <! ATTLIST t:stylesheet id ID # REQUIRED > ] > <? xml-stylesheet type ="text/xsl" href ="#t:stylesheet" ? > < t:stylesheet id ="t:stylesheet" version ="1.0" xmlns:t ="http://www.w3.org/1999/XSL/Transform" > < t:output doctype-public ="-//W3C//DTD XHTML 2.0//EN" doctype-system ="http://www.w3.org/MarkUp/DTD/xhtml2.dtd" /> < t:template match =" @* | node() " > < t:copy > < t:apply-templates select =" @* | node() " /> </ t:copy > </ t:template > < t:template match =" *[ @src and contains( @srctype, 'xml' ) ] " > < t:copy > < t:apply-templates select =" @* " /> < t:apply-templates select =' document( @src )//html/body/* ' /> </ t:copy > </ t:template > < t:template match =" / " > < t:apply-templates select =" document( '#t:stylesheet' )//html " /> </ t:template > < t:template name ="content" > < html > < head > < title > Xbrowser HTML includes </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> </ head > < body > < h1 > Third file </ h1 > < div src ="index2.xml" srctype ="text/xml" > < a href ="index2.xml" > link 2 second file </ a > </ div > </ body > </ html > </ t:template > </ t:stylesheet >

ロボットと惨めなモバイルブラウザの場合、ページをテキスト/ htmlとしてレンダリングするだけで、挿入されたファイルの代わりにそのページへのリンクが描画されます。

互換性：ie6 +、ff3 +、opera10 +、webkit？+

クロスブラウザーHTMLインクルード\（^ _ ^）/

More articles: