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

在Internet Explorer中获取Angular 7 web组件中的iframe以进行刷新

,可以通过以下步骤实现:

  1. 首先,确保你已经安装了Angular CLI,并创建了一个Angular 7项目。
  2. 在Angular 7项目中,使用Angular CLI生成一个新的组件,用于包含iframe元素。可以使用以下命令生成组件:
  3. 在Angular 7项目中,使用Angular CLI生成一个新的组件,用于包含iframe元素。可以使用以下命令生成组件:
  4. 在生成的IframeComponent组件的HTML模板中,添加一个iframe元素,并设置一个唯一的id属性,以便在后续的操作中进行引用。例如:
  5. 在生成的IframeComponent组件的HTML模板中,添加一个iframe元素,并设置一个唯一的id属性,以便在后续的操作中进行引用。例如:
  6. 在IframeComponent组件的Typescript文件中,使用ViewChild装饰器来获取iframe元素的引用。例如:
  7. 在IframeComponent组件的Typescript文件中,使用ViewChild装饰器来获取iframe元素的引用。例如:
  8. 在ngAfterViewInit生命周期钩子函数中,可以通过this.iframe.nativeElement来访问iframe元素。例如,可以使用以下代码来刷新iframe:
  9. 在ngAfterViewInit生命周期钩子函数中,可以通过this.iframe.nativeElement来访问iframe元素。例如,可以使用以下代码来刷新iframe:

这样,当IframeComponent组件被加载时,它会获取到iframe元素的引用,并在ngAfterViewInit生命周期钩子函数中刷新该iframe。

关于Angular 7的更多信息和使用方法,可以参考腾讯云的Angular产品文档: Angular产品介绍

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

相关·内容

后台管理UI选择

、简洁 2、兼容IE8、不考虑兼容IE6/IE7,因为现在还有很多公司使用Win7系统,系统内置了IE8 3、能通过选项卡打开多个页面,不想做单页,iframe也没关系 4、性能好,不要太笨重 5、最好...Bootstrap为基础 6、还希望以后别的系统能够复用。...兼容浏览器: Internet Explorer 10 Internet Explorer 11 Internet Explorer 8 Internet Explorer 9 Latest Chrome...,用途广泛jQuery插件,她可以用于所有的Web应用程序,如网站管理后台,网站会员中心,CMS,CRM,OA等等,当然,您也可以对她进行深度定制,做出更强系统。...它可以用于所有类型web应用程序自定义管理面板,项目管理系统,管理仪表板,应用程序后端,CMS或CRM。

5K21

深入理解浏览器原理

一、浏览器概论 浏览器经历了很多年发展,浏览器引擎也不停地迭代和演进。从PC时代到移动端,独立浏览器形态还是以系统WebView组件内嵌形态存在,互联网生态系统中一直扮演着重要角色。...兼容Chromium内核,同时保留EDGE内核来兼容企业网站 Internet Explorer 11:Windows 8.1,引擎Trident 7.0 Internet Explorer 10:Windows...8默认浏览器,引擎Trident Internet Explorer 9 Internet Explorer 8:Windows 7集成 Internet Explorer 7:Windows Vista...集成,2016年停止支持 Internet Explorer 6:2014年停止支持 2....构建绘制应用程序并根据touchmove坐标放置路径等可能会丢失中间坐标绘制平滑线,可以使用getCoalescedEvents指针事件方法来获取这些合并事件信息。

4.6K31
  • 每天都在用浏览器,你知道它是如何工作吗?

    一、浏览器概论 浏览器经历了很多年发展,浏览器引擎也不停地迭代和演进。从PC时代到移动端,独立浏览器形态还是以系统WebView组件内嵌形态存在,互联网生态系统中一直扮演着重要角色。...兼容Chromium内核,同时保留EDGE内核来兼容企业网站 Internet Explorer 11:Windows 8.1,引擎Trident 7.0 Internet Explorer 10:...Windows 8默认浏览器,引擎Trident Internet Explorer 9 Internet Explorer 8:Windows 7集成 Internet Explorer 7:Windows...Vista集成,2016年停止支持 Internet Explorer 6:2014年停止支持 2....构建绘制应用程序并根据touchmove坐标放置路径等可能会丢失中间坐标绘制平滑线,可以使用getCoalescedEvents指针事件方法来获取这些合并事件信息。

    2.2K20

    js打印WEB页面内容代码大全

    ").innerHTML+" "+document.getElementById("div2").innerHTML; window.print(); } 如果要打印只是整个页面一小部分,就最好采用第二种方法...第三种方法:如果要打印页面排版和原web页面相差很大,采用此种方法。 点打印按钮弹出新窗口,把需要打印内容显示到新窗口中,新窗口中调用window.print()方法,然后自动关闭新窗口。  ...(1,1) 打开 Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口 Web.ExecWB(4,1) 保存网页 Web.ExecWB(6,1) 打印 Web.ExecWB(7,1)...Web.ExecWB(22,1) 刷新 Web.ExecWB(45,1) 关闭窗体无提示 2、分页打印 P {page-break-after: always} <%while not rs.eof...WEB应用本地特定打印 function print_onclick //打印函数 dim label label=document.printinfo.label.value //获得HTML页面的数据

    7.5K20

    记录Ally项目的点点滴滴(二)-corlorbox and iframe

    因为美国总部那边目前放圣诞年假,所以这一个礼拜不是很忙,就把Ally一期之中所遇到问题和解决方案都整理了一下,因为有很多js问题,国内网站上找不到相应解决资料,我就代同行们整理一下,希望能给大家以后开发中提供一些便利...根据客户要求,我们需要在IE7,IE8,火狐,google和Safari5种浏览器下进行测试,那么问题出现了。   ...1,项目中,我们使用了jquery.colorbox.js 来实现提示窗体,IE7下面,提示框边框成了黑色。如下, ?   ...下,图片边框阴影无法显示;   解决方案:colorbox.css修改,把它src路径修改成相对于本项目的相对路径。...PDF之前,用户输入信息同时,其可以看到预览效果,因为是用IFrame实现,我们要在IFrame页面上即填即显信息,所有,问题又来了。

    69520

    实施前端微服务化六七种方式

    Angular Tabs 示例 如果这一类应用过于复杂,那么它必然是要进行微服务化拆分。因此,采用 iframe 时候,我们需要做这么两件事: 设计管理应用机制 设计应用通讯机制 加载机制。...其本身对于应用侵入性太强,因此通过 iframeEl.contentWindow 去获取 iFrame 元素 Window 对象是一个更简化做法。...组合式集成:将应用微件化 组合式集成,即通过软件工程方式构建前、构建时、构建后等步骤,对应用进行一步拆分,并重新组合。...引入现有的框架,类似于 iframe 形式 前者是一种组件方式,或者则像是迁移未来 “遗留系统” 到未来架构上。...集成现有框架 Web Components 另外一种方式,则是类似于 Stencil 形式,将组件直接构建成 Web Components 形式组件,随后在对应诸如,如 React 或者 Angular

    2.3K20

    实施前端微服务化方式

    Angular Tabs 示例 如果这一类应用过于复杂,那么它必然是要进行微服务化拆分。因此,采用 iframe 时候,我们需要做这么两件事: 设计管理应用机制 设计应用通讯机制 加载机制。...其本身对于应用侵入性太强,因此通过iframeEl.contentWindow去获取 iFrame 元素 Window 对象是一个更简化做法。...组合式集成:将应用微件化 组合式集成,即通过软件工程方式构建前、构建时、构建后等步骤,对应用进行一步拆分,并重新组合。...引入现有的框架,类似于 iframe 形式 前者是一种组件方式,或者则像是迁移未来 “遗留系统” 到未来架构上。...集成现有框架 Web Components 另外一种方式,则是类似于 Stencil 形式,将组件直接构建成 Web Components 形式组件,随后在对应诸如,如 React 或者 Angular

    1.2K10

    Angular 10 正式发布,不再支持 IE910!

    与生态系统保持同步 与往常一样,我们对 Angular 依赖项进行了一些更新,与 JavaScript 生态系统保持同步。...要为需要它浏览器(例如 IE 或 UC 浏览器)启用 ES5 构建和差异化加载,只需.browserslistrc 文件添加你要支持浏览器即可。...在过去三周,我们框架、工具和组件未解决问题数量减少了 700 多个。我们已解决了 2,000 多个问题,并计划在接下来几个月中投入大量资源,与社区合作做更多事情。...经过与社区大量协调沟通,我们不再支持一些旧版浏览器,包括 IE9、10 和 Internet Explorer Mobile。 在下方链接查阅关于弃用和移除更多信息。...http://v10.angular.io/guide/deprecations 如何更新到 v10 版本 请访问 update.angular.io 获取详细信息和指导。

    2.5K20

    GitHub上最流行Top 10 JavaScript项目

    它确保,运行于一个系统之上安装(包),可以同样高效方式运行于另一个系统。 4. Angular 2 ? 相比React,很难说出哪个更好,因为两者各有优劣。...另一个优点是 webpack.config缺省、大量 *rc-files 及 package.json相关元素。 7. React Native ?...为了节省时间,使用React Native进行开发,你无需重新编译,反而可以立即加载应用。为了另外增加几分情调,React Native还可以顺畅调用采用Objective-C或Java写组件。...Redux可用来创建同构应用,不允许查看者或回调函数直接对状态进行写操作。 9. Bootstrap ? Bootstrap是一个免费、开源前端Web框架。...从版本2.0,它开始支持响应式Web设计,版本3.0开始支持Google Chrome、Firefox、Safari、Opera和Internet Explorer。 10. D3 ?

    1.3K20

    对打 Angular,Blazor 赢在哪里?

    Blazor 功能 使用 C# 创建 Web UI。 支持渐进式 Web 应用开发。 创建可复用 C# 组件。 完全支持服务端调试。 支持服务端渲染,用于更快 WebSocket 连接。...然而,并不是所有的浏览器都支持 WebAssembly,所以如果你碰巧使用 Internet Explorer,可能就会遇到麻烦。 Angular 是什么?...Blazor 现在提供了 scoped 组件样式和 CSS 隔离。 Angular ,与组件样式和 CSS 隔离相关工具链已经非常成熟了。...何时使用 Angular: 如果你愿意在 Angular 上投入大量学习努力,从一个久经考验框架获益。...最终,你应根据项目要求 Blazor 和 Angular 之间进行选择,选出最能满足你需求一种。我建议阅读它们文档获取更多信息。

    2.9K30

    经验之谈-关于实际项目微前端优化

    iframe必须给一个指定高度,否则会塌陷 弹窗及遮罩层问题:只能在iframe范围内垂直水平居中,没法整个页面垂直水平居中(可使用全局弹窗) 浏览器前进/后退问题:iframe页面刷新会重置(比如说从列表页跳转到详情页...,然后刷新,会返回到列表页),因为浏览器地址栏没有变化(push基层进行路由跳转) 每次子应用进入都是一次浏览器上下文重建、资源重新加载过程。...,Vue都是组件框架) 每个子应用需要使用 Web Components 技术编写组件或者使用框架生成 优点:面向未来技术 缺点:重构代价很大,所有的代码需要用web Components重写 Web...(新建两个子项目vue/react各一个,原来架构下,开发访问) 需要解决问题: 使用iframe,并且路由中 **“#/iframe”** 开头即可访问并隐藏其他内容,分开iframe与原有的内容并且通过显示隐藏进行切换...但是vue延迟挂载app.mount('#app')会报错。

    1.5K50

    iframe 有什么好处,有什么坏处?

    scrolling 规定是否 iframe 显示滚动条,值为 yes、no、auto 6、src 设置 iframe 地址(页面/图片) 7、srcdoc 用来替换 iframe html、body...']; 四、 iframe 获取父级内容 ?...,target="_blank" allow-pointer-lock iframe 可以锁定鼠标,主要和鼠标锁定有关 可以通过 sandbox 里,添加允许进行权限.... Safari 和 Chrome 里,通过 JavaScript 动态设置 iframe SRC 可以避免这种阻塞情况 3、唯一连接池 浏览器只能开少量连接到 web 服务器。...比较老浏览器,包含 Internet Explorer 6 & 7 和 Firefox 2,只能对一个域名(hostname)同时打开两个连接。这个数量限制新版本浏览器中有所提高。

    4.1K10

    Microsoft 安全公告摘要(2015 年 10 月)

    Explorer 漏洞。...攻击者也可能在使用 IE 呈现引擎应用程序或 Microsoft Office 文档嵌入标有“安全初始化” ActiveX 控件,将用户定向到经特殊设计网站。...如果用户 Windows 打开经特殊设计工具栏对象或攻击者诱使用户在线查看经特殊设计内容,这些漏洞可能允许远程执行代码。...本公告“受影响软件”和“不受影响软件”表下面几列,“最新软件版本”是指主题软件,“较旧软件版本”是指主题软件所有较旧受支持版本。...支持 已对列出受影响软件进行测试,确定受到影响版本。其他版本支持生命周期已结束。要确定软件版本技术支持生命周期,请访问 Microsoft 技术支持生命周期。

    1.7K70

    Selenium面试题

    12、Selenium定位Web元素有哪些方法? 13、Selenium中有多少种类型WebDriver API可用? 14、可以与Selenium集成实现持续测试自动化工具有哪些?...30、WebDriver如何进行拖放操作? 31、WebDriver刷新网页有哪些方法? 32、编写代码片段浏览器历史记录前后导航? 33、怎样才能得到一个网页元素文本?...12、Selenium定位Web元素有哪些方法? Selenium ,网络元素是定位器帮助下识别和定位。...因此,可以使用相同文本脚本 Windows 上 Internet Explorer 和 Mac 机器上 Safari 上执行测试。它减少了测试执行时间并提供了快速反馈。...返回浏览器历史记录: Java 浏览器历史记录向前导航: driver.navigate().forward(); 33、怎样才能得到一个网页元素文本? 获取命令用于获取指定网页元素内部文本。

    8.5K11

    2020vue面试题及答案_人际关系面试题及答案

    对微应用和微服务支持不同:Angular使用是TypeScript,因此它更适合于单页Web应用(single page web application,SPA),而非微服务。...组件之间传值方式不同:Angular 中直接父子组件,父组件可以直接访问子组件 public 属性和方法,也可以借助于@Input 和 @Output 进行通讯。...38、如何获取dom 我们vue项⽬,难免会因为引⽤第三⽅库⽽需要操作DOM标签,vue为我们提供了ref属性。 ref 被⽤来给元素或⼦组件注册引⽤信息。...引⽤信息将会注册组件 $refs 对象上。如果在普通 DOM 元素上使⽤,引⽤指向就是 DOM 元素;如果⽤组件上,引⽤就指向组件实例 39、iframe优缺点?...iframe也称作嵌⼊式框架,嵌⼊式框架和框架⽹页类似,它可以把⼀个⽹页框架和内容嵌⼊现有的⽹页

    8.7K20

    浅谈移动端页面无刷新跳转问题解决方案

    比起用链接来跳转页面,这样做也是有很多好处(比如appjs,jquery Mobile) 这种web形式如今移动端十分流行,毕竟在移动端频繁得去刷新界面不是很友好,而且还费流量。...它将所有的活动局限于一个Web页面,仅在该Web页面初始化时加载相应HTML、JavaScript 和 CSS。 一旦页面加载完成了,SPA不会因为用户操作而进行页面的重新加载或跳转。...Web App和Hybrid App横行时代,为了拥有更好用户体验,单页面应用顺势而生,单页面应用简称SPA,就是只有一个HTML页面的应用程序,应用中所有的视图都包含在这个HTML页面,并通过...因此这也成了目前流行前端框架angular、react等选用方案。通过HTML5 History API,实现页面跳转,实现简单单页面web应用。...其二,除了响应式问题兼容性不好之外(也正因此iframe很不适合用在移动端),iframe作为使用多年浏览器技术之一,许多方面的兼容性要好许多,也是一些新技术低版本浏览器上不可用时替代解决方案

    3.7K40

    GitHub上最流行Top 10 JavaScript项目

    利用React,开发者可以构建大型Web应用。页面无需重新加载,应用数据便可实时更新。React力求快速、简单,完美适用于有复杂业务逻辑应用。 Yarn ?...它确保,运行于一个系统之上安装(包),可以同样高效方式运行于另一个系统Angular 2 ? 相比React,很难说出哪个更好,因为两者各有优劣。...为了节省时间,使用React Native进行开发,你无需重新编译,反而可以立即加载应用。为了另外增加几分情调,React Native还可以顺畅调用采用Objective-C或Java写组件。...Redux可用来创建同构应用,不允许查看者或回调函数直接对状态进行写操作。 Bootstrap ? Bootstrap是一个免费、开源前端Web框架。...从版本2.0,它开始支持响应式Web设计,版本3.0开始支持Google Chrome、Firefox、Safari、Opera和Internet Explorer。 D3 ?

    1.1K20

    javascript跨域

    最近在项目开发过程遇到一些Javascript 跨域请求问题,今天抽空对其进行总结一下,以备后用,也希望同学们遇到类似问题时候可以有所帮助。...所谓Javascript跨域问题,是指在一个域下页面通过js访问另一个不同域下数据对象,出于安全性考虑,几乎所有浏览器都不允许这种跨域访问,这就导致一些ajax和iframe应用,使用跨域web...下一代浏览器都将支持这个功能:Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。...可以是页面iframecontentWindow属性;window.open返回值;通过name或下标从window.frames取到值。...但是HTML5 IE6, IE7浏览器下不兼容,目前移动端解决跨域问题用得比较多, PC机上用得比较少。

    1.5K40
    领券