iframe跨域动态设置主窗口宽高

时间：2022-04-01 13:11:24

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

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

操作步骤：

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

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

　　

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

 <script type="text/javascript">

 !(function (){

     var search = window.location.search;

     if(!search || search.indexOf('zeus') === -1)return;

      var query = {};

      search.slice(1).split('&').forEach(function(item){

          var a = item.split('=');

         query[a[0]] = a[1];

      })

     if(query.zeus){

         var body = document.body;

         var w = Math.max(body.scrollWidth, body.clientWidth);

         var h = Math.max(body.scrollHeight, body.clientHeight);

         var iframeNode = document.createElement('iframe');

         iframeNode.style.display = 'none';

         iframeNode.src = query.zeus + '/m/iframe/ware#' + w + '|' + h;

         body.appendChild(iframeNode);

     }

 })();

 </script>

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

 const setIframeWH = () => {

   const outerWindow = window.parent.parent;

   const locationPathname = outerWindow.location.pathname;

   const idname = locationPathname.replace(/\//gi, '__');

   let iframeMain = outerWindow.document.getElementById(idname);

   let hash = window.location.hash;

   if (iframeMain && hash.indexOf('#') >= 0) {

     let [width, height] = hash.slice(1).split('|');

     iframeMain.style.width = `${width}px`;

     iframeMain.style.height = `${Number(height) + 50}px`;

   }

 }

相关文章