欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

跨域下iframe自适应高度_html/css_WEB-ITnose

程序员文章站 2022-05-12 17:09:10
...
最近在做一个需求,需求大致背景:页面中iframe嵌入另一家公司的列表页

博主的第一反应就是“very easy!”,so,挽起双袖开始敲代码

结果出现问题了,iframe跨域,无法获得内嵌页面的高度,因此出现的上下滚动条,so难看!

于是上网找大神,皇天不负有心人啊,终于找到了,激动之情无以言表....

故事背景交代完毕

/******************************华丽的分割线,哈哈****************************/

大神的例子大致是这样的:

假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。

我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度

a.html中包含iframe:

1 

在c.html中加入如下代码:

1 2 

最后,agent.html中放入一段js:

 1 

agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制)

文章引用:前端开发博客