Crossbrowser HTML Inclusion \ (^ _ ^) /
Suppose we have a simple HTML index1.htm
As you know, html supports inclusions only via iframe / object, but it’s not very convenient to work with them from javascript.
You can, of course, put a script like this in each connected page
')
It transfers its contents to the parent document and deletes the frame. But in the case of javascript disabled, we will get a window of the frame that does not adjust to the size of the contents.
In XHTML2, an interesting feature became apparent - the src attribute can be set to any element and the contents of the document it points to will be replaced instead of the element content. Let's write index2.htm
Checked - does not work. You can revive it with javascript, which again can be disabled, but this is not so fatal - the user will be shown a link to the included file.
But we will do better and do without javascript. And help us in this xsl transformation, superimposed on itself. Let's write index2.xml, which will be nothing more than index.htm wrapped in a special magic wrapper.
The doctype here performs two functions:
1. it indicates to the xml processor that the id attribute in t: stylesheet is an identifier, which allows its use when specifying an xsl transform.
2. If the document is given as text / html, then the browser will still render the page in the compliance mode. In t: output we prescribe the doctype for the same reason, only for the case when the document was given as xml and xslt converted itself to html.
The first template matches all nodes and copies them recursively. The second one is matched to the root and skips xslt tags, immediately going to the html output. The last rule simply contains html with inclusions. His name does not matter.
If you check it now in the browser, then there should be no difference. However, if you add another template, then the switches will suddenly start working.
It is noteworthy that in this way you can both xml type index2.xml, and html type index1.htm
Write index3.xml, which includes index2.xml
For robots and poor mobile browsers, you can simply give the page as text / html and then a link to it will be drawn instead of the inserted file.
Compatibility: ie6 +, ff3 +, opera10 +, webkit? +
<! DOCTYPE html > <br> < html > <br> < head > <br> < title > Xbrowser HTML includes </ title > <br> < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> <br> </ head > <br> < body > <br> < h1 > First file </ h1 > <br> </ body > <br> </ html >As you know, html supports inclusions only via iframe / object, but it’s not very convenient to work with them from javascript.
You can, of course, put a script like this in each connected page
')
new function (){<br> var frame= window.frameElement<br> if ( !frame ) return <br> var parent= frame.parentNode<br> var body= document .getElementsByTagName( 'body' )[0]<br> var child;<br> while ( child= body.firstChild ) parent.insertBefore( child, frame )<br> parent.removeChild( frame )<br>}It transfers its contents to the parent document and deletes the frame. But in the case of javascript disabled, we will get a window of the frame that does not adjust to the size of the contents.
In XHTML2, an interesting feature became apparent - the src attribute can be set to any element and the contents of the document it points to will be replaced instead of the element content. Let's write index2.htm
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd" > <br> < html > <br> < head > <br> < title > Xbrowser HTML includes </ title > <br> < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> <br> </ head > <br> < body > <br> < h1 > Second file </ h1 > <br> < div src ="index1.xml" srctype ="text/xml" > <br> < a href ="index1.xml" > link 2 first file </ a > <br> </ div > <br> </ body > <br> </ html >Checked - does not work. You can revive it with javascript, which again can be disabled, but this is not so fatal - the user will be shown a link to the included file.
But we will do better and do without javascript. And help us in this xsl transformation, superimposed on itself. Let's write index2.xml, which will be nothing more than index.htm wrapped in a special magic wrapper.
<! DOCTYPE t:stylesheet [ <! ATTLIST t:stylesheet id ID # REQUIRED > ] > <br> <? xml-stylesheet type ="text/xsl" href ="#t:stylesheet" ? > <br> < t:stylesheet id ="t:stylesheet" version ="1.0" xmlns:t ="http://www.w3.org/1999/XSL/Transform" > <br> < 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" /> <br> < t:template match =" @* | node() " > <br> < t:copy > <br> < t:apply-templates select =" @* | node() " /> <br> </ t:copy > <br> </ t:template > <br> < t:template match =" / " > <br> < t:apply-templates select =" document( '#t:stylesheet' )//html " /> <br> </ t:template > <br> < t:template name ="content" > <br> < html > <br> < head > <br> < title > Xbrowser HTML includes </ title > <br> < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> <br> </ head > <br> < body > <br> < h1 > Second file </ h1 > <br> < div src ="index1.htm" srctype ="text/xml" > <br> < a href ="index1.htm" > link 2 first file </ a > <br> </ div > <br> </ body > <br> </ html > <br> </ t:template > <br> </ t:stylesheet >The doctype here performs two functions:
1. it indicates to the xml processor that the id attribute in t: stylesheet is an identifier, which allows its use when specifying an xsl transform.
2. If the document is given as text / html, then the browser will still render the page in the compliance mode. In t: output we prescribe the doctype for the same reason, only for the case when the document was given as xml and xslt converted itself to html.
The first template matches all nodes and copies them recursively. The second one is matched to the root and skips xslt tags, immediately going to the html output. The last rule simply contains html with inclusions. His name does not matter.
If you check it now in the browser, then there should be no difference. However, if you add another template, then the switches will suddenly start working.
< t:template match =" *[ @src and contains( @srctype, 'xml' ) ] " > <br> < t:copy > <br> < t:apply-templates select =" @* " /> <br> < t:apply-templates select =' document( @src )//html/body/* ' /> <br> </ t:copy > <br> </ t:template >It is noteworthy that in this way you can both xml type index2.xml, and html type index1.htm
Write index3.xml, which includes index2.xml
<! DOCTYPE t:stylesheet [ <! ATTLIST t:stylesheet id ID # REQUIRED > ] > <br> <? xml-stylesheet type ="text/xsl" href ="#t:stylesheet" ? > <br> < t:stylesheet id ="t:stylesheet" version ="1.0" xmlns:t ="http://www.w3.org/1999/XSL/Transform" > <br> < t:output doctype-public ="-//W3C//DTD XHTML 2.0//EN" doctype-system ="http://www.w3.org/MarkUp/DTD/xhtml2.dtd" /> <br> < t:template match =" @* | node() " > <br> < t:copy > <br> < t:apply-templates select =" @* | node() " /> <br> </ t:copy > <br> </ t:template > <br> < t:template match =" *[ @src and contains( @srctype, 'xml' ) ] " > <br> < t:copy > <br> < t:apply-templates select =" @* " /> <br> < t:apply-templates select =' document( @src )//html/body/* ' /> <br> </ t:copy > <br> </ t:template > <br> < t:template match =" / " > <br> < t:apply-templates select =" document( '#t:stylesheet' )//html " /> <br> </ t:template > <br> < t:template name ="content" > <br> < html > <br> < head > <br> < title > Xbrowser HTML includes </ title > <br> < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> <br> </ head > <br> < body > <br> < h1 > Third file </ h1 > <br> < div src ="index2.xml" srctype ="text/xml" > <br> < a href ="index2.xml" > link 2 second file </ a > <br> </ div > <br> </ body > <br> </ html > <br> </ t:template > <br> </ t:stylesheet >For robots and poor mobile browsers, you can simply give the page as text / html and then a link to it will be drawn instead of the inserted file.
Compatibility: ie6 +, ff3 +, opera10 +, webkit? +
Source: https://habr.com/ru/post/90373/
All Articles