经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子页面的高度调整父页面中iframe的高度，这就要求页面必须具有自适应功能。自适应思想比较简单：就是父页面中iframe高度必须要适时根据子页面高度进行调整。由于涉及到js操作，因此对于不同域名的自适应解决方案有所不同，主要是在解决跨域问题。
·对于同父级域名下的自适应高度：jipiao.taobao.com/index.htm页面中嵌入jiudian.taobao.com/xxx.htm页面
1.0http://jipiao.taobao.com/index.htm中关键代码
viewplaincopytoclipboardprint?
1.<iframeid="J_selfAdapting"src="http://jiudian.taobao.com/xxx.htm"mce_src="http://jiudian.taobao.com/xxx.htm"frameborder="0"scrolling="no"style="height:0;"></iframe>
页面增加如下JS:
viewplaincopytoclipboardprint?
1.<mce:scripttype="text/javascript"><!--
2.(function(){
3./**
4.*获取当前域
5.**/
6.function_getDomain(){
7.var_hostname=window.location.hostname.toString();
8.var_hosts=_hostname.split(".");
9.var_len=_hosts.length;
10.if(_len>2){
11.return_hosts[_len-2]+"."+_hosts[_len-1];
12.}
13.return_hostname;
14.}
15.document.domain=_getDomain();
16.})();
17.//--></mce:script>
2.子页面http://jiudian.taobao.com/xxx.htm中嵌入如下代码。即可。
viewplaincopytoclipboardprint?
1.<mce:scripttype="text/javascript"><!--
2.(function(){
3./**
4.*获取当前域
5.**/
6.function_getDomain(){
7.var_hostname=window.location.hostname.toString();
8.var_hosts=_hostname.split(".");
9.var_len=_hosts.length;
10.if(_len>2){
11.return_hosts[_len-2]+"."+_hosts[_len-1];
12.}
13.return_hostname;
14.}
15.
16.window.οnlοad=function()
17.{
18.//设置子页面的域
19.document.domain=_getDomain();
20.function_setHeight()
21.{
22.if(window.parent!=window)
23.{
24.try
25.{
26.//设置父级iframe的高度
27.parent.document.getElementById("J_selfAdapting").style.height=document.body.scrollHeight+'px';
28.}
29.catch(e)
30.{
31.}
32.}
33.//每隔2s设置一次，主要为了兼容子页面加载完毕之后高度再变化
34.setTimeout(_setHeight,2000);
35.}
36.//子页面加载完毕之后调用一次
37._setHeight();
38.}
39.})();
40.//--></mce:script>
·不同父级页面，例如jipiao.taobao.com,www.koubei.com域名完全不一样，解决办法是使用一个代理页面jipiao.taobao.com/proxy.htmjipiao.taobao.com/index.htm页面嵌入www.koubei.com/xxxx.htm，而xxx.htm需要隐藏嵌入jipiao.taobao.com/proxy.htm做为代理，可以将高度写在后面jipiao.taobao.com/proxy.htm#500，表示500px高度。
1.jipiao.taobao.com/index.htm页面中关键代码：
viewplaincopytoclipboardprint?
1.<iframeid="J_selfAdapting"src="http://www.koubei.com/xxxx.htm"mce_src="http://www.koubei.com/xxxx.htm"frameborder="0"scrolling="no"style="height:0;"></iframe>
增加如下JS:
viewplaincopytoclipboardprint?
1.<mce:scripttype="text/javascript"><!--
2.(function(){
3./**
4.*获取当前域
5.**/
6.function_getDomain(){
7.var_hostname=window.location.hostname.toString();
8.var_hosts=_hostname.split(".");
9.var_len=_hosts.length;
10.if(_len>2){
11.return_hosts[_len-2]+"."+_hosts[_len-1];
12.}
13.return_hostname;
14.}
15.document.domain=_getDomain();
16.})();
17.//--></mce:script>
2.www.koubei.com/xxxx.htm中关键代码：
viewplaincopytoclipboardprint?
1.<iframescrolling="no"frameborder="0"style="display:none;"mce_style="display:none;"src="http://jipiao.taobao.com/proxy.htm#597"mce_src="http://jipiao.taobao.com/proxy.htm#597"id="taobaoIframe">
2.</iframe>
viewplaincopytoclipboardprint?
1.<mce:scripttype="text/javascript"><!--
2.(function(){
3.varpageHeight=document.body.scrollHeight;
4.document.getElementById('taobaoIframe').src='http://jipiao.taobao.com/proxy.htm#'+pageHeight;
5.})();
6.//--></mce:script>
3.在代理页面jipiao.taobao.com/proxy.htm中所有的代码如下：
viewplaincopytoclipboardprint?
1.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<htmlxmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<metahttp-equiv="Content-Type"content="text/html;charset=GBK"/>
5.</head>
6.<body>
7.<mce:scripttype="text/javascript"><!--
8.(function(){
9./**
10.*获取当前域
11.**/
12.function_getDomain(){
13.var_hostname=window.location.hostname.toString();
14.var_hosts=_hostname.split(".");
15.var_len=_hosts.length;
16.if(_len>2){
17.return_hosts[_len-2]+"."+_hosts[_len-1];
18.}
19.return_hostname;
20.}
21.document.domain=_getDomain();
22.varheight=window.location.hash.substring(1);
23.try{
24.varel=window.top.document.getElementById('J_selfAdapting');
25.if(el){
26.el.style.height=height+'px';
27.}
28.}
29.catch(e){}
30.})();
31.//--></mce:script>
32.</body>
33.</html>
5840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
