IFRAME full cross-origin highly adaptive solution

ArticleDirectory

• Solution description:
• Code:

When you see this demand, it's dark, and you can solve another knowledge point. Haha, after a day's struggle, I had some gains, and through the guidance of Feifei, there were still breakthroughs in cross-origin problem solving (not through hash ).

Check the demo. compatible with IE, ff, and safari.

Solution description:

Requirement: a page (taobao.com) needs to be embedded into B page (alibaba.com). Because the height of B page cannot be determined, high adaptability is required.

Solution: Simply put, create an iframe c in the same domain as a on the B page to allow communication between C and A to pass the height of B.

So how can we pass it over? The previous method was to change the location. Hash of parent. Parent (that is, a) in C, but changing the hash will generate a browser history record. The user experience of clicking the backward button is not good. We tried to directly retrieve frames [B]. Frames [C]. Location. Hash on page a, so we can get it.

The rest is simple. Specify iframe B in a to get the hash of C after loading, and then set the height of iframe B through hash.

Details Code :

Page A: (based on Yui)

/*** Run the function after the IFRAME is loaded ** @ Param {element} el * @ Param {function} func */var oniframeload = function (El, func) {var cb = function () {try {func. call (this);} catch (e) {}} if (TB. bom. isie) {el. onreadystatechange = function () {If (El. readystate = 'complete') {setTimeout (CB, 0); El. onreadystatechange = NULL ;}} else {el. onload = function () {setTimeout (CB, 0); El. onload = NULL ;}};/*** highly adaptive cross-origin IFRAME encapsulation ** @ Param {string} name */var crossdomainiframe = function (name) {var IFRAME = Yahoo. util. dom. get (name); var xclient = 'xclient'; oniframeload (IFRAME, function () {try {var H = frames [name]. frames [xclient]. location. hash. substring (1); If (H = '') {var func = arguments. callee; setTimeout (function () {func () ;}, 20); Return ;}iframe. style. height = H + 'px ';} catch (e) {}}) ;}; // execute crossdomainiframe ('frame _ content '); 

Page B:

  (function () {function addloadevent (func) {var oldon Load = Window. onload; If (typeof window. onload! = 'Function') {window. onload = func;} else {window. onload = function () {oldonload (); func () ;}} function adjust () {var H = document.doc umentelement. scrollheight | document. body. scrollheight; try {If (document. getelementbyid ('xclient') {var divel = document. getelementbyid ('xclient '). parentnode; console. log (document. getelementbyid ('xclient '). parentnode); divel. parentnode. removechild (divel);} var El = document. createelement ('div '); El. innerhtml = ''; document. body. appendchild (EL);} catch (e) {}} addloadevent (adjust) ;}) ();  

Page C: empty page. There is a file to avoid 404.