首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

根据angular 2中的内容大小调整Iframe的高度

在Angular 2中,要根据内容大小调整Iframe的高度,可以通过以下步骤实现:

  1. 首先,确保已经在Angular项目中引入了Iframe组件。可以通过在组件的模块文件中导入IframeModule来实现。
代码语言:typescript
复制
import { IframeModule } from 'ngx-iframe';

@NgModule({
  imports: [
    // 其他模块导入
    IframeModule
  ],
  // 组件声明、提供者等
})
export class AppModule { }
  1. 在组件的HTML模板中,使用Iframe组件并绑定相关属性。
代码语言:html
复制
<ngx-iframe [src]="iframeUrl" [height]="iframeHeight"></ngx-iframe>

在上述代码中,iframeUrl是一个组件中定义的变量,用于存储Iframe的URL地址。iframeHeight也是一个变量,用于存储Iframe的高度。

  1. 在组件的TypeScript文件中,根据内容大小来动态计算Iframe的高度。
代码语言:typescript
复制
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  iframeUrl: string;
  iframeHeight: string;

  ngOnInit() {
    // 设置Iframe的URL地址
    this.iframeUrl = 'https://example.com';

    // 获取Iframe内容的高度
    const iframeContentHeight = this.getIframeContentHeight();

    // 设置Iframe的高度
    this.iframeHeight = `${iframeContentHeight}px`;
  }

  private getIframeContentHeight(): number {
    // 获取Iframe元素
    const iframeElement = document.getElementsByTagName('iframe')[0];

    // 获取Iframe内容的高度
    const iframeContentHeight = iframeElement.contentWindow.document.body.scrollHeight;

    return iframeContentHeight;
  }
}

在上述代码中,getIframeContentHeight()方法用于获取Iframe内容的高度。通过获取Iframe元素,然后获取其内容窗口的文档对象,再获取文档对象的body元素的scrollHeight属性,即可得到内容的高度。最后,将内容高度赋值给iframeHeight变量,以实现动态调整Iframe的高度。

这样,根据Angular 2中的内容大小调整Iframe的高度的需求就可以实现了。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JQuery iframe高度自适应浏览器窗口大小解决方法

需求场景1 实现需求:如下图,点击左侧导航,打开对应tab页面,其中tab页面的内容iframe,这里希望iframe高度和宽度,根据浏览器窗口大小变化而变化,同时页面内容过多,或者过宽时,出现...width="100%" 设置用于控制iframe页面宽度根据浏览器宽度变化而变化 iframe代码片段2 基本同“iframe代码片段1”,只是给changeFrameHeight函数增加iframeID...> JS代码片段1(批量更改所有tab页iframe高度) /** * 设置tab标签对应iframe页面高度 */ function changeFrameHeight(){ var.../** * 浏览器窗口大小发生变化时,自动调整iframe页面高度 * 浏览器等因素导致改变浏览器窗口大小时,会发生多次resize事件,导致频繁调用changeFrameHeight() */ $(...当调整浏览器窗口大小时,发生 resize 事件。

6.5K20

iframe标签(页面嵌套)

开发工具与关键技术:VS 作者:听民谣老猫 撰写时间:2019/6/10 18:15 上面两张图是两个不同页面但是它们基本框架都是一样,每点击一次左边导航栏改变都是中间内容区域...定义: 标签规定一个内联框架,在当前html中嵌入另一个文档; 语法: 一些常用属性 参数 解析 align 根据周围文字排列 iframe。...frameBorder 是否显示框架周围边框。 noResize 框架是否可调整大小 scrolling 框架是否有滚动条。 src 被嵌入html中文档URL。...其实就是设置iframe高度,等于内嵌网页高度,这样就看不出来滚动条和嵌套痕迹。...自动调节iframe高度Js代码 //根据浏览器大小调整iframe高度 reSetSize(); window.onresize = reSetSize;

2.9K10

html多媒体

框架可以完全由设计者定义宽度和高度,并且可以放置在一个网页任何位置,这极大地扩展了框架页面的应用范围。...生成框架结构是依赖上级空间尺寸,它宽度或者高度必须有一个和上级框架相同。而浮动框架可以完全由指定宽度和高度决定。...在普通框架结构中,由于框架就是整个浏览器窗口,因此不需要设置其大小。但是在浮动框架中,框架是插入到普通HTML页面中,所以可以调整框架大小。浮动框架宽度和高度都是以像素为单位。...(二)、设置浮动框架是否显示滚动条scrolling 对于浮动框架iframe滚动条,我们可以使用scrolling属性来控制。scrolling属性有3种情况:根据需要显示、总是显示和不显示。...: scrolling属性值 scrolling属性值 说明 auto 默认值,整个表格在浏览器页面中左对齐 yes 总是显示滚动条,即使页面内容不足以撑满框架范围,滚动条位置也预留

1.2K30

iframe 自适应高度多种实现方式

大家好,又见面了,我是你们朋友全栈君。 iframe高度自适应内容 需求:实现 iframe 自适应高度,能够随着页面的长度自动适应以免除页面和 iframe 同时出现滚动条现象。...如果内容是固定,那么我们可以通过css来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化时候。这个时候又有几种情况了。...一、iframe内容未知,高度可预测 这个时候,我们可以给它添加一个默认cssmin-height值,然后同时使用JavaScript改变高度。...二、多个iframe情况下 //输入你希望根据页面高度自动调整高度iframe名称列表 //用逗号把每个iframeID分隔....IE dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; } } //根据设定参数来处理不支持iframe浏览器显示问题

6.1K30

iframe跨域调用js_ajax跨域访问

大家好,又见面了,我是你们朋友全栈君。 概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端Ifrane自适应了高度。...HTML文件Iframe没有根据Iframe里面的页面类容自适应高度 2.Iframe自适应高度代码 在index.html文件中间中添加Iframe页面,页面加载时,加载src指定文件路径 frameborder...=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”> JS脚本自适应调整Iframe高度 function iFrameHeight(id) {...由于JS禁止跨域访问,如何实现不同域子页面将高度返回给父页面本身,是解决自定义高度难点....J 中字母不重复,J 和 S中所有字符 … Java数组初始化 1.动态初始化 数据类型 [] 变量名 = new 数据类型 [数组大小]; //数组动态初始化 int [] arr = new

10.8K20

记录工作中遇到各种问题(Bug,总结,记录)

页面使用Angular.js(1),页面中iframe中初始设置src属性的话,会导致页面重新加载一次 例如设置一个初始值,某些操作之后再更改src <iframe src="#" class="export-iframe...有一种坑、或者说是特性叫做 Font Boosting,这个特性也叫做 Text Autosizer, 现象就是字体显示大小,与在CSS中指定大小不一致 是 Webkit 给移动端浏览器提供一个特性...有个HTML5视频插件叫做 Video.js,要实现视频海报大小占满视频大小的话 直接设置width、height无效,设置background-size: cover 可以解决 22....,不过好像生成路径有点问题,基本还得自己再调整一下 ?...在PC上和模拟器上内容是垂直居中,但在真机上内容却偏上了一丢丢  在华为小米中发现过 49.

17.8K12

如何实现iframe(嵌入式帧)自适应高度

好几次看到有人提问问到如何实现 iframe 自适应高度,能够随着页面的长度自动适应以免除页面和 iframe 同时出现滚动条现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数...不敢独享,大家要是觉得有用,欢迎使用 源代码如下  //** iframe自动适应页面 **//  //输入你希望根据页面高度自动调整高度...iframe名称列表  //用逗号把每个iframeID分隔....//定义iframeID  var iframeids=["test"]  //如果用户浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏  var iframehide...IE       dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;     }    }    //根据设定参数来处理不支持

1.1K20

AngularDart 4.0 高级-安全

- HTML不被解释,浏览器在元素文本内容中显示尖括号。...内容安全策略 内容安全策略(CSP)是一种防御XSS纵深防御技术。 要启用CSP,请将Web服务器配置为返回适当Content-Security-Policy HTTP标头。...不要使用模板语言在服务器端生成Angular模板; 这样做带来了引入模板注入漏洞高风险。 信任安全值 有时应用程序真的需要包含可执行代码,从某个URL显示,或构建潜在危险URL。...以下模板允许用户输入YouTube视频ID并将相应视频加载到中。属性是资源URL安全上下文,因为不受信任源也可以,例如在用户不知情可私自执行文件下载。 ...所以调用控制器上一个方法来构建一个可信视频URL,这会导致Angular允许绑定到中: lib/src/bypass_security_component.html (iframe

3.6K20

一文带你响应式网页设计入门

(RWD) 是指网页可以自动根据用户行为及使用设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应对布局和行为进行相应响应和调整。...用于标识移动网站Viewport Meta标签 viewport meta标签为浏览器如何调整页面以适应每个设备宽度做出了依据。...媒体查询是自适应Web设计重要组成部分,通常用于屏幕大小和方向不同网格布局、字体大小、边距和填充。...使用内容溢出滚动条进行水平滚动 可能会有这样一种情况:您内容会溢出界面,而没有一种优雅处理方式去解决。没关系,内容溢出滚动条可以为你解决这个问题。 此技术常见用途包括可滚动菜单和表格。...最后,宽度和高度为100%会使子级iframe元素成为其父级100%。父级.videoWrapper完全控制建立此宽高比布局。

4.7K20

EasyUi 动态tabs 在实际项目中遇到问题与解决方法

新增iframe 高度用百分比在谷歌浏览器中无效 2、点击切换按钮tabsresize方法无效 3、鼠标移到iframe上会有滚动条 刚开始是把iframe设置成固定高度,当把iframe设置成...scrolling="auto"时,,这时鼠标移到iframe上会有滚动条,如果设置成scrolling="no"超出内容的话就没有滚动条了,看样子把iframe设置成固定高度是不合适,改成iframe...高度内容高度。...由于内容使用了bootstrap table插件,table高度根据窗口高度变化,iframe高度内容高度有关,首先需要确定table高度,可以根据localStorage设置高度,table...方法,调整标签页(tabs)容器尺寸并做布局。

2.2K20

iFrameFrame嵌入Silverlight时自适应高度处理

iFrame如果嵌入是普通网页,这种场景下iframe高度自适应解决方案,百度一下随手都能找到一大把。...但是嵌入Silvelight时,嵌入iframe父页面默认不知道Silverlight内容真实高度,所以上述办法就不起作用了。...其实只要换个思路:既然父页面不知道iframe中SL高度,SL难道不能自己主动向父页面汇报自已高度吗? 先看最终效果: ? ? ?...注:Page1,Page3均是SL中UserControl 代码见下面的源代码: 主要步骤为 1、SL在每个页面的Page_Loaded中,通过与父页面的js交互,主动报告当前SL页面的高度 2、父页面得到高度后...,用js动态调整iFrame/Frame高度 示例源代码:http://files.cnblogs.com/yjmyzz/SL_Iframe_Height_Sample.7z

51020
领券