Home > Developer > JavaScript

IFRAME cross-domain highly adaptive implementation code in JavaScript

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

High self-adaptation of IFRAME in the same domain
The following code is compatible with the Ie/firefox browser, which controls the height of the iframe with id "Iframeid", gets the final height of the nested page through JavaScript, and then sets it on the main page to implement it.

Also, please note that this solution is for use only with the same domain name.

The code is as follows Copy Code

<script type= "Text/javascript" >

function Setcwinheight () {


var Iframeid=document.getelementbyid ("Iframeid"); IFRAME ID




if (document.getElementById) {




if (Iframeid &&!window.opera) {




if (iframeid.contentdocument && iframeid.contentDocument.body.offsetHeight) {




Iframeid.height = Iframeid.contentDocument.body.offsetHeight;




}else if (Iframeid. Document && Iframeid. Document.body.scrollHeight) {




Iframeid.height = Iframeid. Document.body.scrollHeight;




}




}




}




}




</script>




<iframe width= "100%" id= "Iframeid" onload= "Javascript:setcwinheight ()" height= "1" frameborder= "0" src= "kimi.php" ></iframe>

IFrame height Adaptive when cross-domain
when the home page and the nested IFRAME are different domain names, it's a bit cumbersome to avoid JavaScript cross-domain restrictions.

Principle: The existing IFRAME homepage main.html, is the iframe nested page iframe.html, the IFRAME intermediary page agent.html three, through main.html (domain name for http:// www.ccvita.com) nested iframe.html (domain name: http:// Www.phpq.net), when the user browses the execution iframe.html the JavaScript code setting IFRAMEC's SCR address to add the IFRAME page height, agent.html (domain name: http:// www.ccvita.com) Gets the height of the pass, setting the height of the iframe in the main.html through JavaScript. Ultimately achieve the desired goals.

IFRAME Home Face main.html


The code is as follows Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  
  
   


 
 
   


 
 
    <body>


 
 
    ;


 
 
    <div style= "border:1px solid #ccc;p adding:10px;" ><iframe id= "frame_content" name= "frame_content" src= "iframe.html" width= "100%" height= "0" scrolling= "no" Frameborder= "0" ></iframe></div><br/> tail <br/></body>


 
 
   


 

IFrame nested page iframe.html

The code is as follows Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">










<body>







Text <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/& GT text <br/><br/><br/><br/><br/><br/><br/><br/><br/><br /> text <br/><br/><br/><br/><br/><br/><br/><br/><br/>< br/> Text <br/><br/><br/><br/><br/><br/><br/><br/><br/>& LT;BR/><iframe id= "Iframec" name= "Iframec" src= "" width= "0" height= "0" style= "display:none;" ></iframe >







<script type= "Text/javascript" >




function Sethash () {




Hashh = Document.documentElement.scrollHeight;




URLC = "agent.html";




document.getElementById ("Iframec"). src=urlc+ "#" +HASHH;




}




Window.onload=sethash;




</script>







</body>

IFRAME Intermediary page agent.html

The code is as follows Copy Code


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">













<body>







<script>




function Pseth () {




var iobj = parent.parent.document.getElementById (' frame_content ');




IOBJH = parent.parent.frames["Frame_content"].frames["Iframec"].location.hash;




IObj.style.height = Iobjh.split ("#") [1]+ "px";




}


Pseth ();

</script>


</body>


UPDATE: Netizens have long been saying that the scheme can not be cross-domain, today I again tested the next, determined in the IE6, IE7, IE8, IE9, Firefox full range, chrome full range can successfully control the height of the cross-domain. Please note the following points
First, modify the SRC address of the IFRAME in the main.html file as a domain name that requires cross-domain (e.g. ccvita.sinaapp.com)

Second, modifying the URLC value in the iframe.html file to the source domain name (such as www.ccvita.com) is most important


solving cross-domain iframe adaptive height


The following is directly on the code.
Here is the core code loader.js

The code is as follows Copy Code

/**

* Cross-domain IFRAME Adaptive height solution

* Author:changyin@taobao.com

* Copyright (c), Taobao Inc. All rights reserved.

*/

var Loader = new function () {

var doc = Document,body = Doc.body,

Self = this,

Get the parameters in the URL

Getrequest = function (name) {

var reg = new RegExp ("(^|&)" + name + "= ([^&]*) (&|$)", "I"),

r = Window.location.search.substr (1). Match (REG);

Return (r!=null)? Unescape (r[2]): null;

},

Get configuration, script priority is greater than parameters in URL

GetConfig = function () {

var scripts = doc.getelementsbytagname (' script '),

script = Scripts[scripts.length-1];

return function (param) {

var p = script.getattribute (param);

Return p? P:getrequest (param);

};

}(),

Agent Height

Proxyheight = 0,

ID of the top page frame

Frameid = GetConfig ("Data-frameid"),

Monitor real-time update height interval

Timer = GetConfig ("Data-timer"),

Get the URL of the agent

Getproxyuurl = GetConfig ("Data-proxy"),

Create an IFRAME for the agent

Proxyframe = function () {

var el = doc.createelement ("iframe");

El.style.display = "None";

El.name= "proxy";

Return el;

}();

Reset Height

This.resize = function () {

Proxyheight = Body.offsetheight;

PROXYFRAME.SRC = Getproxyuurl + "? data-frameid=" + frameid+ "&data-frameheight=" + (PROXYHEIGHT+40);

}

This.init = function () {

var init = function () {

Body.appendchild (Proxyframe);

Self.resize ();

Whether update

if (!isnan (timer)) {

Timer = timer<500?500:timer;

Window.setinterval (function () {

if (body.offsetheight!= proxyheight) {

Self.resize ();

}

},timer);

};

};

if (Doc.addeventlistener) {

Window.addeventlistener ("Load", init,false);

}else{

Window.attachevent ("onload", init);

}

If the JS framework is introduced, it is recommended to change the above sentence for example: Kissy.ready (function () {init ();});

}

};


Loader.init ();


————————-
Agent file proxy.html

The code is as follows Copy Code

<! DOCTYPE html>

<title>proxy</title>

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">

<body>

<script>

(function () {

var getrequest = function (name) {

var reg = new RegExp ("(^|&)" + name + "= ([^&]*) (&|$)", "I"),

r = Window.location.search.substr (1). Match (REG);

Return (r!=null)? Unescape (r[2]): null;

},

Height = getrequest ("Data-frameheight");

try {

var el = window.top.document.getElementById (Getrequest ("Data-frameid"));

if (!el) return;

El.style.height = height + ' px ';

}

catch (e) {

Console.log (e);

}

})();

</script>

</body>

————————-

How to use:
first, in the main page to include the IFRAME into the Loader.js

Second, incoming parameters. There are two methods of parameter transfer:

1. When the main page refers to an IFRAME, parameters are appended to the URL of the IFRAME to be referenced
For example

The code is as follows Copy Code
<iframe id= "Testframe" src= "a.html?data-frameid=testframe&data-auto=200&data-proxy=proxy.html" > </iframe>

2.iframe page contains loader.js when passed in
For example

  code is as follows copy code
:<script Src= "loader.js" Data-frameid = "testframe"  data-timer = "2000″ data-proxy =" proxy.html "></script>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
php code in javascript javascript line break in code javascript new line in code zip code validation in javascript php code in javascript function search function in javascript code strtok implementation code c
Related Article
JavaScript solution to the eight Queens Problem method summar...
Http status code: 301, 302 redirection, 302 redirection
Ajax and 302 response code Testing
Ajax and 302 response code test_javascript-js tutorial

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More