angular中跨域设置iframe自适应高度，去滚动条。

最新推荐文章于 2023-08-30 17:57:11 发布
原创 最新推荐文章于 2023-08-30 17:57:11 发布 · 601 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #javascript #angular.js

本文介绍了一个场景：A页面使用iframe元素，并在ngAfterViewInit生命周期钩子中动态设置iframe的高度；同时，A页面与B页面通过postMessage方法进行跨窗口消息传递。文章探讨了如何在B页面获取正确的滚动高度以便于消息传递。

  A页面的html中有<iframe #frame class="frame" [src]="srcUrl" width="100%"  frameborder="0"

 scrolling="no"></iframe>

A页面的ts文件中动态设置iframe高度

在ngAfterViewInit方法中写入如下方法。

 B页面，要与A页面通过postMessage方法进行通信。其中id为B页面里面最外层的div的id，也可以用document.body.scrollHeight尝试。我用body的时候是有点问题.

 

IT蓉儿
关注
最全面、最详细web前端面试题及答案总结
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
前端知识宝典
最新发布
qq_37759901的博客
01-29 2336
搜索框输入，文本剪辑器实时保存代码实现思路如下：（利用定时器，每次触发先清掉以前的定时器，从新开始）
angularjs 页面自适应高度的方法
01-21
需求 在angularjs构建的业务系统中，通过ui-view路由实现页面跳转，初始化进入系统后，右侧内容区域需要自适应浏览器高度。 实现方案 在ui-view所在的Div添加directive，directive中通过element.css初始化计算div的高度，动态更新div高度 directive监听（$$watch)angular的$digest，实时获取body高度，动态赋值model或element.css改变 方案1：添加directive和element.css自适应高度 1.创建directive define([ app ], function(app) {
AngularJS iframe跨域打开内容时报错误的解决办法
10-24
主要介绍了AngularJS iframe跨域打开内容时报错误的解决办法,需要的朋友可以参考下
angular iframe 加载失效解决办法已经自适应高度
weixin_30883271的博客
08-12 468
<iframe frameborder="0" id="iframe1"></iframe> $('#iframe1').attr('src', 'www.baidu.com'); document.getElementById("iframe1").contentDocument.location.reload(); 自适应高度: ...
获取iframe（angular 动态页面）高度
alili1991的博客
03-08 363
问题比较特殊，google了好久才得到启示 开发的angular页面，需要嵌入到客户的web页中，以iframe方式。由于iframe的高度需要指定，而angular动态生成机制导致页面高度会随时变化， 就会出现2个滚动条，一个是页面本身，一个是iframe里的。 解决方法如下： 1.写一个directive监听angular的$digest，实时获取body高度，通过HTML...
如何设置iframe高度自适应在跨域情况下的可用方法
01-19
在父页面中给定一个不带滚动条的iframe，然后对属性src指定一个可加载的页面，这样当父页面被访问的时候，子页面可以被自动加载。iframe的高度需要根据子页面的实际高度来进行调整。如果iframe的高度小于子页面的...
angular中iframe
08-24
- *3* [angular中跨域设置iframe自适应高度，去滚动条。](https://blog.csdn.net/ITronger/article/details/127907056)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
iframe中页面显示不全1
08-08
在这个例子中，`<div>`的宽度和高度被设定为500px和300px，而`<iframe>`则被设置为相对定位并充满整个`<div>`。`position: absolute`使`<iframe>`相对于其最近的非静态定位祖先（这里就是`<div>`）定位，`top`和`...
jquery对iframe自适应高度插件
02-23
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行，不用做任何别的操作完全自动化。
iframe自适应高度
lzf的博客
06-30 1018
iframe自适应高度是开发项目中经常遇到的问题。 一般来说，在同域情况下，直接在被嵌套的页面B中获取其自身高度并操作其父窗口main的dom属性即可
iframe高度自适应
FE小白的进化之路
02-11 758
&lt;iframe id="myIframe" width="100%" height="700px" frameborder="0" scrolling="no" onload="changeFrameHeight()" src="$url"&gt; &lt;/iframe&gt; &lt;script typ
Iframe 跨域高度自适应
時雨的博客
07-10 602
一开始想直接在iframe加载完成后读取子页面的doc中body的高度，结果发现有跨域问题，无法获得子页面的具体信息，后面在网上寻找各种解决方案，有很多是没有用的，甚至直接没考虑跨域的，最后找到一种方便而且使用的方法：子页面发送消息给父页面，父页面监听消息。父页面存在一个iframe标签加载https://moments.shiyu.dev/friends 这个子页面，而且父子页面不在同一个域上，所以父页面在加载完成iframe后创建事件监听，监听子页面发来的消息(高度)。
iframe 跨域
Fly to sky
05-08 237
第一种不跨域领导：document.getElementByI d("iframe").contentWindow.document.getElementByI d("message").value员工：parent.document.getElementByI d("message").value第二种主域相同领导：document.domain=主域名           document.g
iframe通过postMessage进行跨域通信以及在Angular中使用
m0_54944506的博客
08-30 1634
在前端开发过程中，会遇到一些需要使用iframe的场景，使用iframe关键的一个点是数据之间的传输，基于同源的要求十分苛刻，大家基本上是都是跨域的，如果跨域进行数据传输呢？大家使用的比较多的就是postMessage()这个方法了，下面将具体展示如何在html中使用iframe进行数据传输，以及在angular框架中如何使用以及在angular中与html中的差异性htmlsrc:string;) {
iframe自适应高度（随内容高度变化）
weixin_50641294的博客
05-25 6569
由于需求需要把一个项目的页面嵌套到另外一个页面，但是iframe高度不能写死，所以要让iframe高度自适应 1.解决思路： 获取嵌套页面的高度，把高度赋值给父页面的iframe 代码实现 1.首先在嵌套页面获取父级ifram元素 let iframeDom = parent.parent.document.getElementById("iframe") 2.获取嵌套页面高度 let box = document.getElementById("box") 3.把页面高度复制给父级ifram iframe
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值