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

Posted wwwweb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 }

 

以上是关于iframe跨域动态设置主窗口宽高的主要内容,如果未能解决你的问题,请参考以下文章

在iframe中如何调用父窗体的方法?

使用 jquery.ba-postmessage 的 iframe 动态高度跨域

获得从 iframe 到我无法控制的父窗口 dom 的跨域访问?

js动态添加iframe,自适应页面宽高

解决跨域问题

iframe学习之窗口跨域