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

如何在Angular 8中完全加载iframe内容后进行函数调用

在Angular 8中完全加载iframe内容后进行函数调用的方法如下:

  1. 首先,在组件的HTML模板中添加一个iframe元素,并设置一个唯一的id属性,用于后续的操作。例如:
代码语言:txt
复制
<iframe id="myIframe" src="https://example.com"></iframe>
  1. 在组件的Typescript文件中,使用ViewChild装饰器获取到iframe元素的引用。例如:
代码语言:txt
复制
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements AfterViewInit {
  @ViewChild('myIframe', { static: false }) myIframe: ElementRef;

  ngAfterViewInit() {
    // 在这里进行函数调用
    this.callFunctionInIframe();
  }

  callFunctionInIframe() {
    // 获取iframe元素的引用
    const iframe = this.myIframe.nativeElement;

    // 确保iframe已经完全加载完成
    iframe.onload = () => {
      // 在这里调用iframe中的函数
      iframe.contentWindow.myFunction();
    };
  }
}
  1. 在callFunctionInIframe函数中,首先获取到iframe元素的引用,然后通过contentWindow属性访问到iframe中的全局对象。假设在iframe中有一个名为myFunction的函数,可以直接通过contentWindow.myFunction()进行调用。

需要注意的是,为了确保iframe已经完全加载完成,我们使用了iframe的onload事件。当iframe加载完成后,会触发onload事件,并在事件处理函数中进行函数调用。

这是在Angular 8中完全加载iframe内容后进行函数调用的方法。希望对你有帮助!

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

相关·内容

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

微服务在这个过程中做的事情是,将调用函数调用变成了远程调用,诸如远程 HTTP 调用。...后端:函数调用 -> 远程调用 在大多数的 CRUD 类型的 Web 应用中,也都存在一些极为相似的模式,即:首页 -> 列表 -> 详情: 首页,用于面向用户展示特定的数据或页面。...详情,展示一个数据的尽可能多的内容。...一些典型的场景,传统的 Desktop 应用迁移到 Web 应用: ? Angular Tabs 示例 如果这一类应用过于复杂,那么它必然是要进行微服务化的拆分。...组合式集成:将应用微件化 组合式集成,即通过软件工程的方式在构建前、构建时、构建等步骤中,对应用进行一步的拆分,并重新组合。

2.3K20

AngularDart 4.0 高级-安全

本页面介绍了Angular内置的针对常见的Web应用程序漏洞和跨站脚本攻击等攻击的内置保护。 它不包括应用程序级别的安全性,身份验证(此用户是谁?)和授权(此用户可以做什么?)。...避免直接与DOM进行交互,而应尽可能使用Angular模板。 内容安全策略 内容安全策略(CSP)是一种防御XSS的纵深防御技术。...以下模板允许用户输入YouTube视频ID并将相应的视频加载到中。属性是资源URL安全上下文,因为不受信任的源也可以,例如在用户不知情可私自执行文件下载。 ...所以调用控制器上的一个方法来构建一个可信的视频URL,这会导致Angular允许绑定到中: lib/src/bypass_security_component.html (iframe...应用程序 Angular应用程序必须遵循与常规Web应用程序相同的安全原则,并且必须进行审核。

3.6K20
  • 实施前端微服务化的方式

    微服务在这个过程中做的事情是,将调用函数调用变成了远程调用,诸如远程 HTTP 调用。...后端:函数调用 -> 远程调用 在大多数的 CRUD 类型的 Web 应用中,也都存在一些极为相似的模式,即:首页 -> 列表 -> 详情: 首页,用于面向用户展示特定的数据或页面。...详情,展示一个数据的尽可能多的内容。...一些典型的场景,传统的 Desktop 应用迁移到 Web 应用: ? Angular Tabs 示例 如果这一类应用过于复杂,那么它必然是要进行微服务化的拆分。...组合式集成:将应用微件化 组合式集成,即通过软件工程的方式在构建前、构建时、构建等步骤中,对应用进行一步的拆分,并重新组合。

    1.2K10

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

    将要创建 ===>调用beforeCreate函数 创建完毕 ===>调用created函数 将要挂载 ===>调用beforeMount函数 挂载完毕 ===>调用mounted函数 将要更新 ===...>调用beforeUpdate函数 更新完毕 ===>调用uodated函数 将要销毁 ===>调用beforeDestory函数 销毁完毕 ===>调用destroyed函数 11、vue生命周期的作用是什么...iframe也称作嵌⼊式框架,嵌⼊式框架和框架⽹页类似,它可以把⼀个⽹页的框架和内容嵌⼊在现有的⽹页中。...优点: 解决加载缓慢的第三⽅内容如图标和⼴告等的加载问题 Security sandbox 并⾏加载脚本 ⽅便制作导航栏 缺点: iframe会阻塞主页⾯的Onload事件 即使内容为空...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    8.7K20

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

    而AjaxFileUpload插件的上传文件处理方式是,获取返回的实体内容,直接进行eval 解析,解析失败,报错,则无法上传 ?...页面使用Angular.js(1),页面中iframe中初始设置src属性的话,会导致页面重新加载一次 例如设置一个初始值,某些操作之后再更改src <iframe src="#" class="export-iframe...Angular.js(1)中经常会碰到 In Progress 的错误问题 估计是经验还不够吧,经常操作调用$scope.$apply() 解决方式就是多用$scope....直接中想监听的地方之后调用 // loading ......,在完全自适应内容的情况下是非常非常难做到的(在复杂表头的时候) 所以可以考虑做一些宽高的限制(比如width或设置max-width也可以) 其实主要就是在开始时遍历每一项所计算的宽高,赋值到固定表头的属性中

    18.1K12

    看我如何利用漏洞窃取麦当劳网站注册用户密码

    其中括号中的表达式被执行了,这就意味着,如果服务端允许用户输入的参数中带有花括号,我们就可以用Angular表达式来进行xss攻击。...JS脚本文件,构造如下命令: {{x = {'y':''.constructor.prototype}; x['y'].charAt=[].join;$eval('x=$.getScript(`https...://finnwea.com/snippets/external-alert.js`)');}}` 返回结果如下: 在内容安全策略(Content-Security-Policy)的提示下,第三方脚本文件被成功加载...,甚至存在一个有趣的密码解密函数: 最危险的是,利用该解密函数代码竟然可以实现对客户端或双向加密存储的密码破解。...只有当charAt(0) 不为空时,getCookie才有返回值: 最后,我写了一段调用麦当劳网站首页框架进行cookie窃取的脚本,为了避免脚本因AngularJS沙箱被绕过而被反复执行,所以,我用window.xssIsExecuted

    2K60

    世界顶级公司的前端面试都问些什么

    实现小工具,日期选择器,轮播或电子商务购物车。 编写类似debounce或深度克隆对象的函数。 说到库,常见的另一个错误是人们喜欢完全依赖最新的框架来解决面试问题。...至少,以下是你应该熟悉的JavaScript内容: 执行上下文、尤其是词法作用域和闭包。 提升机制、函数与块作用域、以及函数表达式和声明。...绑定 - 特别是调用、bind、apply 和this关键字。 对象原型,构造函数和mixins。 组合函数和高阶函数。 时间委托和冒泡。...使用回调,promises,await和async处理异步调用。 何时使用函数声明和表达式。...你的设计应考虑XHR与双向调用。如果面试官要求你支持旧版浏览器,那么你的设计需要在隐藏的iFrame,脚本标签或XHR之间进行选择以进行消息传递。

    1.5K30

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    组件特定hooks: ngAfterContentInit:组件内容已初始化完成 ngAfterContentChecked:在Angular检查投影到其视图中的绑定的外部内容之后。...它是如何在Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...什么是延迟加载?如何在Angular 2中启用延迟加载? 大多数企业应用程序包含用各式各样的用于特定业务案例的模块。捆绑整个应用程序代码并完成加载,会在初始调用时,产生巨大的性能开销。...如果应用程序较大时,我会考虑延迟加载而不是完全捆绑的应用程序。...Observable类似于(在许多语言中的)Stream,当每个事件调用回调函数时,允许传递零个或多个事件。

    17.3K80

    多应用聚合实践

    iframe 在企业中,各个研发部门往往各自开发自己的应用。当需要把这些应用聚合在一起时。以往的解决方案是在主应用中嵌入 iframe,使用 iframe 加载和切换子应用页面。...iframe 中的内容需要等待iframe加载再开始加载,白屏时间长,体验较差。 iframe 中的内容不会增加主页面的搜索权重,影响 SEO。...应用库化 以 React 项目为例,我们将组件挂载到DOM上时常会调用 ReactDOM.render 方法, ReactDOM.render(, mountNode); 假如把这封装成一个方法并对外暴露...选择"umd"、"this"、"window"时,编译的代码在浏览器环境中会将导出挂在window上面,如下图 之后,我们在其他项目中引入编译产出,即可调用导出的方法。...微前端作为用户界面的一部分,通常由许多组件组成,并使用类似于React、Vue和Angular等框架来渲染组件。每个微前端可以由不同的团队进行管理,并可以自主选择框架。

    1.6K20

    Comet技术详解:基于HTTP长连接的Web端实时通信技术前言学习交流概述“服务器推”(Comet技术)的应用范围来看看更传统的基于客户端套接口的“服务器推”技术基于 HTTP 长连接的“服务器

    JavaScript 在收到服务器端以 XML 格式传送的信息可以很容易地控制 HTML 页面的内容显示。...最近几年,因为 AJAX 技术的普及,以及把 IFrame 嵌在“htmlfile“的 ActiveX 组件中可以解决 IE 的加载显示问题,一些受欢迎的应用 meebo,gmail+gtalk 在实现中使用了这些新技术...在这种长轮询方式下,客户端是在 XMLHttpRequest 的 readystate 为 4(即数据传输结束)时调用回调函数进行信息处理。...同样的思路用在 iframe 方案的客户端,iframe 服务器端并不返回直接显示在页面的数据,而是返回对客户端 Javascript 函数调用“js_func(“data from server...使用 iframe 请求一个长连接有一个很明显的不足之处:IE、Morzilla Firefox 下端的进度栏都会显示加载没有完成,而且 IE 上方的图标会不停的转动,表示加载正在进行

    6K11

    Angular开发实践(二):HRM运行机制

    引言 在angular-start项目中启用了模块热替换(HMR - Hot Module Replacement)功能,关于如何在angular-cli启用HRM,请查看HRM配置 那HMR是个什么东西呢...主要是通过以下几种方式,来显著加快开发速度: 保留在完全重新加载页面时丢失的应用程序状态 只更新变更内容,以节省宝贵的开发时间 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式 这一切是如何运行的...这意味着一个简单的处理函数能够对整个模块树(complete module tree)进行更新。如果在这个模块树中,一个单独的模块被更新,那么整组依赖模块都会被重新加载。...如果请求成功,待更新chunk会和当前加载过的chunk进行比较。对每个加载过的chunk,会下载相对应的待更新chunk。当所有待更新chunk完成下载,就会准备切换到ready状态。...然后更新当前hash,并且调用所有accept处理函数。runtime切换回闲置状态,一切照常继续。

    1.7K70

    2018年前端面试总结

    async 函数返回值是 Promise 对象,比 Generator 函数返回的 Iterator对象方便,可以直接使用 then() 方法进行调用。...,子函数调用了父函数内部的变量,如果子函数在外部被调用,就产生了闭包。...②服务器交给后端处理完成返回的数据,浏览器接收文件HTML,CSS,JS图片等。 ③浏览器对加载的资源进行语法解析,建立相应的数据内部结构。...会阻塞页面的 onload事件 ②搜索引擎不能够解读 iframe 页面,不利于 seo ③iframe和主页面共享连接池,然而浏览器对相同域的链接是有限制的,所以这会影响页面的并行加载。...25.base64的原理及优缺点 优点:可以将二进制数据转化为可打印字符,方便传输数据,对数据进行简单的加密,肉眼安全。 缺点:内容编码体积变大,编码和解码需要CPU额外工作量。

    72520

    customElements 实战之 Lite-embed

    Lite-embed 是基于 customElements Web Components 规范开发的组件,支持以 iframe 方式快速地嵌入第三方站点, Bilibili、Youku、QQ、Youtube...,自动以 iframe 的方式嵌入所指定的内容。...'click', e => this.addIframe()) } } 在 connectedCallback 方法中,我们监听 pointerover 事件,在该事件触发,我们调用 warmConnections...iframe 内嵌网页 Lite-embed 组件要实现的最后一个功能就是懒加载 iframe 内嵌网页,即当用户点击海报或播放按钮的时候,才创建 iframe 元素进而开始加载内嵌网页。...,但同时也存在一些问题,比如在点击视频封面或海报时,才开始动态加载 iframe,会造成需要二次点击才能正常播放嵌入的视频。

    1.6K20

    2020前端性能优化清单(四)

    下载开始,脚本流允许 async 或 defer scripts 在单独的后台线程上进行解析,因此在某些情况下,页面加载时间最多可缩短 10%。...完全由服务器端渲染(SSR) 在典型的SSR(例如WordPress)中,所有请求都完全在服务器上处理。所请求的内容将作为完成的 HTML 页面返回,浏览器可以立即进行渲染。...借助 React,我们可以在 Node 服务器( Express)上[16]使用 `ReactDOMServer` 模块[17],然后调用 renderToString 方法将顶级组件生成为静态 HTML...在 Angular 中,我们可以用 `@nguniversal`[19]把客户端的请求转换成完全由服务端渲染你的HTML页面。...经过604800秒,缓存将重新获取请求的内容,从而导致页面加载速度变慢。

    3.3K20

    Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

    这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...生命周期钩子详解:https://angular.cn/guide/lifecycle-hooks 当 Angular 使用构造函数新建一个组件或指令,就会按下面的顺序在特定时刻调用这些生命周期钩子方法...: 注意:constructor 构造函数(依赖注入,起到对应局部变量值初始化作用): 除了使用简单的值对局部变量进行初始化之外,什么都不应该做!!!...ngAfterContentInit() 当 Angular 把外部内容投影进组件/指令的视图之后调用。 第一次 ngDoCheck() 之后调用,只调用一次。...ngAfterContentChecked() 每当 Angular 完成被投影组件内容的变更检测之后调用

    4K20
    领券