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

最新推荐文章于 2023-08-30 17:57:11 发布
最新推荐文章于 2023-08-30 17:57:11 发布
阅读量434 收藏
点赞数
文章标签： html 前端 javascript angular.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITronger/article/details/127907056
版权

  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蓉儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angular项目怎么给iframe动态赋值
alice9999999的博客
12-07 606
前段时间在做项目的时候，给项目嵌入了一个第三方的ai链接，之前写成一个死的链接，测试都正常，但是后期迭代的时候将链接后面动态添加了一个参数，发现iframe不出来，并且查看dom结构，直接src对应的属性都没了，经过一顿研究发现原因是因为angular会会自帮我们清除和转义不受信任的值。通过使用DomSanitizer可以解决此问题，
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) {
angular iframe 加载失效解决办法已经自适应高度
weixin_30883271的博客
08-12 416
<iframe frameborder="0" id="iframe1"></iframe> $('#iframe1').attr('src', 'www.baidu.com'); document.getElementById("iframe1").contentDocument.location.reload(); 自适应高度: ...
获取iframe（angular 动态页面）高度
alili1991的博客
03-08 290
问题比较特殊，google了好久才得到启示 开发的angular页面，需要嵌入到客户的web页中，以iframe方式。由于iframe的高度需要指定，而angular动态生成机制导致页面高度会随时变化， 就会出现2个滚动条，一个是页面本身，一个是iframe里的。 解决方法如下： 1.写一个directive监听angular的$digest，实时获取body高度，通过HTML...
iframe自适应高度
lzf的博客
06-30 948
iframe自适应高度是开发项目中经常遇到的问题。 一般来说，在同域情况下，直接在被嵌套的页面B中获取其自身高度并操作其父窗口main的dom属性即可
iframe高度自适应
FE小白的进化之路
02-11 689
&lt;iframe id="myIframe" width="100%" height="700px" frameborder="0" scrolling="no" onload="changeFrameHeight()" src="$url"&gt; &lt;/iframe&gt; &lt;script typ
div实现自适应高度的textarea实现angular双向绑定
08-31
本文将探讨如何用`div`实现自适应高度的textarea，并在Angular中实现双向数据绑定。 首先，为什么不用传统的`<textarea>`？虽然`<textarea>`可以设置固定行数并允许用户输入多行文本，但是它并不方便实现动态高度...
angular中如何绑定iframe中src的方法
10-17
在Angular框架中，有时我们需要动态地为`iframe`元素设置`src`属性，以便根据用户交互或应用程序逻辑来更改加载的网页内容。本篇文章将详细解释如何在Angular中实现这一功能。 首先，让我们理解问题的核心：当我们...
angular6 滚动条判断是否触底.md
06-06
angular6，div 滚动条判断是否触底，用于滚动加载数据。
AngularJS iframe跨域打开内容时报错误的解决办法
10-24
主要介绍了AngularJS iframe跨域打开内容时报错误的解决办法,需要的朋友可以参考下
jquery对iframe自适应高度插件
02-23
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行，不用做任何别的操作完全自动化。
angular.js中解决跨域问题的三种方式
12-11
要解决这个问题就需要跨域，本文介绍解决angular中的跨域的三种方式： 一、JSONP JSONP的原理是通过 [removed] 标签发起一个GET请求来取代XHR请求。JSONP生成一个[removed] 标签并插到DOM中，然后浏览器会接管并向 ...
关于Angularjs中跨域设置白名单问题
01-19
 跨域时将method的属性设置为”jsonp”就可以访问了 app.config([$sceDelegateProvider,function($sceDelegateProvider){ $sceDelegateProvider.resourceUrlWhitelist([ <span xss=removed> </span>//跨域添加白...
iframe 跨域
Fly to sky
05-08 190
第一种不跨域领导：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 1369
在前端开发过程中，会遇到一些需要使用iframe的场景，使用iframe关键的一个点是数据之间的传输，基于同源的要求十分苛刻，大家基本上是都是跨域的，如果跨域进行数据传输呢？大家使用的比较多的就是postMessage()这个方法了，下面将具体展示如何在html中使用iframe进行数据传输，以及在angular框架中如何使用以及在angular中与html中的差异性htmlsrc:string;) {
iframe自适应高度（随内容高度变化）
weixin_50641294的博客
05-25 6055
由于需求需要把一个项目的页面嵌套到另外一个页面，但是iframe高度不能写死，所以要让iframe高度自适应 1.解决思路： 获取嵌套页面的高度，把高度赋值给父页面的iframe 代码实现 1.首先在嵌套页面获取父级ifram元素 let iframeDom = parent.parent.document.getElementById("iframe") 2.获取嵌套页面高度 let box = document.getElementById("box") 3.把页面高度复制给父级ifram iframe
angular中怎么做大屏自适应
05-18
在Angular中实现大屏自适应的方法有很多种，以下是其中的一些： 1. 使用CSS Media Query 使用CSS Media Query可以根据屏幕尺寸来调整页面布局。在Angular中，可以在组件的CSS文件中使用Media Query来设置不同的样式。 例如，在组件的CSS文件中，可以设置一个针对大屏的Media Query，如下所示： ``` @media (min-width: 1200px) { /* 大屏样式 */ } ``` 2. 使用Flex布局 Flex布局可以方便地实现响应式布局。在Angular中，可以使用Flex布局来自适应不同屏幕大小。 例如，在组件的HTML文件中，可以使用Flex布局来设置不同的样式： ``` <div class="container" fxLayout="row" fxLayoutAlign="center center"> <div class="box" fxFlex="50%" fxFlex.gt-sm="30%"> <!-- 内容 --> </div> </div> ``` 3. 使用Bootstrap框架 Bootstrap是一个流行的CSS框架，可以方便地实现响应式布局。在Angular中，可以使用Bootstrap框架来实现大屏自适应。 例如，在组件的HTML文件中，可以使用Bootstrap的栅格系统来设置不同的样式： ``` <div class="container"> <div class="row"> <div class="col-lg-6"> <!-- 内容 --> </div> </div> </div> ``` 以上是几种实现大屏自适应的方法，具体的实现方式可以根据项目需求和个人喜好选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值