zoukankan      html  css  js  c++  java
  • [转载]跨域iframe高度自适应

    场景:

      经常会有这样的需求,跟外部合作伙伴合作,要嵌入别人的页面,这时候就需要高度自适应了,在这种跨域的情况下如何解决呢?

    解决:

       在iframe(合作伙伴的页面,称为P页面)中创建一个隐藏的iframe(称为M2页面),它的src与主页面(称为M1页面)同域,当P页面载入完成,计算出此页面的高度,然后创建隐藏iframe(M2页面),设置M2的src属性,将高度附加到M2的url后面,如http://localhost/proxy.html#height=582,代码:

     1 (function(){
     2     window.onload = function(){
     3         var w = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth),
     4         h = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight),
     5         body = document.getElementsByTagName('body')[0],
     6         iframe = document.createElement('iframe'),
     7         proxyUrl = 'http://hsz-15128:88/proxy.html#'+w+'|'+h;
     8          
     9         iframe.setAttribute('src', proxyUrl);
    10         iframe.style.width = '0';
    11         iframe.style.height = '0';
    12         iframe.style.borderWidth = '0';
    13         body.appendChild(iframe);
    14     }
    15 })();

     然后在proxy.html页面中添加如下代码

     1 (function(){
     2     window.onload = function(){
     3         var hash = self.location.hash,
     4             index = hash.indexOf('#'),
     5             datas = [],
     6             w, 
     7             h,
     8             piframe;
     9          
    10         if( index != -1){
    11             datas = hash.substr(index+1).split('|');
    12              
    13             w = datas[0];
    14             h = datas[1];
    15              
    16             piframe = parent.parent.document.getElementById('cross');
    17             piframe.style.width = w +'px';
    18             piframe.style.height = h + 'px';
    19              
    20         }
    21     }
    22 })();

    取得合作伙伴页面的高度并传给主页面,并重新设置主页面中iframe。

    以上代码在一次项目中亲测可用,感谢@达不留

    原文链接: http://my.oschina.net/forcoding/blog/67663?fromerr=T4ZnYlSh

  • 相关阅读:
    C++ 用宏实现swap(a,b)
    C++ string类的实现
    博客园代码高亮Html转换小程序,Linux/Mac下可用
    C++STL
    数据结构课程设计(基于二叉排序树的身份证管理系统)
    简单模拟B1011
    简单模拟B1001
    双向链表的双向冒泡排序 c++
    IO流处理文件读取到字节数组,再从字节数组读取到文件,Java实现
    Java多人聊天室第一版
  • 原文地址:https://www.cnblogs.com/djh-create/p/5004780.html
Copyright © 2011-2022 走看看