zoukankan      html  css  js  c++  java
  • iframe跨域动态设置主窗口宽高

    Q:
    在A项目的a页面嵌入一个iframe,
    src是B项目的b页面,
    怎样让a页面的高度跟b页面的高度一样?

    A:
    解决跨域方案:增加一个A项目的c页面。


    操作步骤:

    一,a页面的iframe设置: 获取到当前域名,作为参数设置到src上

    1 <iframe id={idname} title=" " scrolling="no" src={`${iframeUrl}?zeus=${locationOrigin}`} >

      

    二,b页面页脚增加以下代码:
    通过location拿到a页面的域名,请求A项目的c页面,并将b页面的宽度高度/宽度通过src传到c页面。

     1 <script type="text/javascript">
     2 !(function (){
     3     var search = window.location.search;
     4     if(!search || search.indexOf('zeus') === -1)return;
     5      var query = {};
     6      search.slice(1).split('&').forEach(function(item){
     7          var a = item.split('=');
     8         query[a[0]] = a[1];
     9      })
    10     if(query.zeus){
    11         var body = document.body;
    12         var w = Math.max(body.scrollWidth, body.clientWidth);
    13         var h = Math.max(body.scrollHeight, body.clientHeight);
    14         var iframeNode = document.createElement('iframe');
    15         iframeNode.style.display = 'none';
    16         iframeNode.src = query.zeus + '/m/iframe/ware#' + w + '|' + h;
    17         body.appendChild(iframeNode);
    18     }
    19 })();
    20 </script>  

    三,c页面添加以下代码:
    通过location拿到b页面的宽高,然后设置a页面的宽高,done!

     1 const setIframeWH = () => {
     2   const outerWindow = window.parent.parent;
     3   const locationPathname = outerWindow.location.pathname;
     4   const idname = locationPathname.replace(///gi, '__');
     5   let iframeMain = outerWindow.document.getElementById(idname);
     6   let hash = window.location.hash;
     7   if (iframeMain && hash.indexOf('#') >= 0) {
     8     let [width, height] = hash.slice(1).split('|');
     9     iframeMain.style.width = `${width}px`;
    10     iframeMain.style.height = `${Number(height) + 50}px`;
    11   }
    12 }
  • 相关阅读:
    html5的离线缓存
    html5的本地存储
    html5的地理位置定位
    html5新添加的表单类型和属性
    html5的鼠标拖拽
    win下svn常用操作笔记
    git常用命令笔记
    centos7下NFS使用与配置
    centos7下mysql5.6的主从复制
    centos7下创建mysql5.6多实例
  • 原文地址:https://www.cnblogs.com/ronffy/p/8302569.html
Copyright © 2011-2022 走看看