My autoresource iframe

Having read the article by Dmitry Koterov about the resize, the iframes decided to share his decision.



We use this solution on a productive site.



So, given:

1. It is necessary to show pages from other domains without a scrollbar in the iframe

2. Transitions can take place inside the ifraim.

3. Sites in the iframe can change the height without overloading (AJAX or just revealing any invisible elements)

4. Included pages should include a minimum code.

5. The solution should not spoil your browsing history and should work in current versions of popular browsers.

6. The solution should work in both cases master.site and www.master.site

')

Decision:



We need to create two iframe_height.js and height.html files on the main master.site site.



On the page itself, create an iframe with id = "iframe". In the included page from the slave.site domain in the head we add the link to the JavaScript http://master.site/iframe_height.js



iframe_height.js:

var __hc = {<br> i: null , // <br> h: 0, // <br> iframes: [ null , null ], // <br> path: 'master.com/height.html#' , // height.html <br> // <br> setHeight: function (height) {<br> var ifr,i;<br> for (i=0;i<2;i++) {<br> if ( this .iframes[i]) this .iframes[i].parentNode.removeChild( this .iframes[i]);<br> ifr = document .createElement( 'IFRAME' );<br> ifr.style.display = 'none' ;<br> this .iframes[i] = ifr;<br> document .body.appendChild( this .iframes[i]);<br> ifr.src = 'http://' + (i ? 'www.' : '' ) + this .path + height;<br> }<br> },<br> // — <br> onLoad: function (full) {<br> this .checkHeight();<br> if (full) {<br> this .i = window.setInterval( this .bind( this .checkHeight), 100);<br> }<br> },<br> // , <br> checkHeight: function () {<br> var h = this .getDocHeight();<br> if ( this .h == h) return ;<br><br> this .h = h;<br> this .setHeight( this .h);<br> },<br> // , <br> getDocHeight: function () {<br> if (window.GetDocumentHeight) return window.GetDocumentHeight();<br> var D = document ;<br> return Math.max(<br> D.body.scrollHeight, D.documentElement.scrollHeight,<br> D.body.offsetHeight, D.documentElement.offsetHeight,<br> D.body.clientHeight, D.documentElement.clientHeight<br> );<br> },<br> // <br> addEvent: function (o, t, h) {<br> if (o.addEventListener) o.addEventListener(t, h, false );<br> else if (o.attachEvent) o.attachEvent( 'on' +t, h);<br> },<br> bind: function (method) {<br> var context = this , args = arguments;<br> return function () {<br> return method.apply(context, Array.prototype.slice.call(args, 1));<br> };<br> },<br> // <br> init: function (full) {<br> this .addEvent(window, 'load' , this .bind( this .onLoad, full));<br> }<br>};<br><br>__hc.init( true ); <br><br> * This source code was highlighted with Source Code Highlighter .

height.html:

< html >< head > <br> < script type ="text/javascript" > <br> // location.hash – <br> var l = location.hash.replace( '#' , '' );<br> if (l) {<br> // try catch <br> try {<br> parent.parent. document .getElementById( 'iframe' ).style.height = l + 'px' ;<br> } catch (e) {}<br> }<br> </ script > <br> </ head > <br> </ html > <br><br> * This source code was highlighted with Source Code Highlighter .

The point is that the iframe inside the ifraim has access to the main window if it is located on the same domain.



I open two iframes, because the solution with document.domain has its drawbacks, which are quite difficult to fix on my website.



This decision does not spoil the history of the browser, because working iframes are re-created each time.



height.html - does not get every time from the server, but is taken from the browser cache



As for determining the height of the document in the iframe, I did not find a cross-browser solution. When content decreases in the iframe, the iframe itself does not decrease, because, for example, in webkitovkih browsers both document.body and document.documentElement are rotated along the height of the iframe. To do this, I check if the GetDocumentHeight function is defined, use it. Those. If on some site it does not suit the calculation of height, then you can implement its function - for specific cases it is much easier than using the universal one.



In general, I am waiting for criticism.