Cross-domain iframe adaptive size for JS cross-domain problem implementation code _javascript skill

Source: Internet
Author: User
Copy Code code as follows:

<body onload= "Javascript:setheight ();" >
<script>
function SetHeight () {
var dheight = document.documentElement.scrollHeight;
var t = document.createelement ("div");
t.innerhtml = ' <iframe id= ' kxiframeagent "src=" http://rest.kaixin001.com/api/agent.html# ' +dheight+ ' "scrolling=" Yes "height=" 0px "width=" 0px "></iframe>";
Document.documentElement.appendChild (T.firstchild);
}
</script>

I think about how to solve the Cross-domain Ah! Then went to the Internet to search for a sudden epiphany

Specifically as follows I'm copying it. Everyone focus on understanding the realization of the idea:


question:

A domain name under the page a.htm through an iframe embedded in the B-Domain page b.html, because the size of the b.html is unpredictable and will change, so need to a.htm in the iframe adaptive size.

The nature of the problem:

JS Cross-domain problem, because to control the size of the IFRAME in the a.htm must first read the size of the b.html, A, B does not belong to the same domain, JS access is limited to read the size of the b.html.

Solution:

First, the premise is that A,b is a cooperative relationship, b.html can be introduced into a provided JS

First, the b.html is introduced into the a.html via IFRAME.

Copy Code code as follows:

<iframe id= "aiframe" height= "0" width= "0" src= "http://www.b.com/html/b.html" frameborder= "no" border= "0px" Marginwidth= "0" marginheight= "0" scrolling= "no" allowtransparency= "yes" ></iframe>
<iframe id= "aiframe" height= "0" width= "0" src= "http://www.b.com/html/b.html" frameborder= "no" border= "0px" Marginwidth= "0" marginheight= "0" scrolling= "no" allowtransparency= "yes" ></iframe>

b in B.html, the introduction of a provided JS file

HTML code
Copy Code code as follows:

<script language= "javascript" type= "Text/javascript" src= "Http://www.a.com/js/a.js" ></script>

The JS first reads the width and height of the b.html, and then creates a iframe,src for the same domain as the intermediate proxy page a_proxy.html, read the wide and high settings into SRC hash inside

HTML code
Copy Code code as follows:

<iframe id= "Iframeproxy" height= "0" width= "0" src= "http://www.a.com/html/a_proxy.html#width|height" style= " Display:none "></iframe>

A_proxy.html is a good intermediate proxy page under a domain, which is responsible for reading the values of width and height in the Location.hash, and then setting the width and height of the IFRAME in the a.html under the same field.

JS Code
Copy Code code as follows:

var pparentframe = parent.parent.document.getElementById ("Aiframe");
var Locationurlhash = parent.parent.frames["Aiframe"].frames["Iframeproxy"].location.hash;
PParentFrame.style.width = Locationurlhash.split ("#") [1].split ("|") [0]+ "px";
PParentFrame.style.height = Locationurlhash.split ("#") [1].split ("|") [1]+ "px";
var pparentframe = parent.parent.document.getElementById ("Aiframe");
var Locationurlhash = parent.parent.frames["Aiframe"].frames["Iframeproxy"].location.hash;
PParentFrame.style.width = Locationurlhash.split ("#") [1].split ("|") [0]+ "px";
PParentFrame.style.height = Locationurlhash.split ("#") [1].split ("|") [1]+ "px";

In this way, the IFRAME in the a.html is adaptive to the width and height of the b.html.

Other problems like JS Cross-domain operation can be solved by this idea

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.