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

在Angular 8中通过window.open传递Html字符串后,Onload事件不会触发

在Angular 8中,使用window.open方法传递HTML字符串后,onload事件不会自动触发的原因是,window.open方法会在新窗口中打开一个URL,而不是直接显示HTML内容。当使用window.open传递HTML字符串时,浏览器将会将该字符串作为URL处理,并尝试加载该URL。

解决这个问题的一种方法是,将HTML字符串转换为一个临时的Blob URL,然后使用window.open打开该URL。这样做的好处是,浏览器会将该URL当作HTML内容加载,并触发onload事件。

以下是一个示例代码:

代码语言:txt
复制
// 在Angular组件中使用DomSanitizer将HTML字符串转换为安全的Blob URL
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

export class YourComponent {
  constructor(private sanitizer: DomSanitizer) {}

  openNewWindow(htmlString: string) {
    const blob = new Blob([htmlString], { type: 'text/html' });
    const url = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(blob));

    // 使用转换后的安全URL打开新窗口
    window.open(url.changingThisBreaksApplicationSecurity);
  }
}

这里使用了DomSanitizer服务将HTML字符串转换为安全的Blob URL,并且使用window.open方法打开该URL,这样onload事件就会被触发。

关于在腾讯云上的相关产品和文档,可以考虑使用腾讯云对象存储(COS)来存储和获取HTML字符串。您可以参考以下链接了解更多信息:

请注意,上述解决方案和腾讯云的相关产品仅供参考,具体实现方式和产品选择应根据项目需求和实际情况进行评估。

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

相关·内容

腾讯面试四问,Are you OK?

首先要回答出页面关闭时会触发事件是什么?...Window: beforeunload event 火狐浏览器下不会报错,可以正常打开 A 页面。 3. 成功传参,A 页面是如何监听 URL 的? onhashchange 是为您排忧解难。...Window: hashchange event:当URL的片段标识符更改时,将触发hashchange事件 (跟在#符号后面的URL部分,包括#符号) 如果你传参是以 A.html?...简单来说就是:在网页 onload 事件设置一个 pending 状态,beforeunload 事件下改变这个 pending 状态为 exit,如果二次访问这个页面,onload 里获取的状态是 pending...首屏位置调用 API 开始统计 -> 绑定首屏内所有图片的 load 事件 -> 页面加载完判断图片是否首屏内,找出加载最慢的一张 -> 首屏时间 白屏时间计算?

12810

前端之BOM和DOM

语法: prompt("请在下方输入","你的答案") 1.2.5.3计时相关 通过使用 JavaScript,我们可以一定时间间隔之后来执行代码,而不是函数被调用后立即执行。...setTimeout() 方法用于指定的毫秒数调用函数或计算表达式,而setInterval()则可以每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。...4.0 的新特性之一,使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。...因为我们无法给一个不存在的元素绑定事件。 window.onload事件文件加载过程结束的时候触发。此时,文档中的所有对象都位于DOM中,并且所有图像,脚本,链接和子框架都已完成加载。...处理方法 方法1:利用onload等待某个对象加载完毕再执行 方法2:直接将JS代码写在body的最下方,这样就不会出现调用的函数还没加载的问题了

2.7K30
  • iframe 有什么好处,有什么坏处?

    ,target="_blank" allow-pointer-lock iframe 中可以锁定鼠标,主要和鼠标锁定有关 可以通过 sandbox 里,添加允许进行的权限....但带来一些其它的问题:onload 事件以及连接池(connection pool) 2、阻塞页面加载 及时触发 window 的 onload 事件是非常重要的。...onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload 事件加载延迟,它给用户的感觉就是这个网页非常慢。...window 的 onload 事件需要在所有 iframe 加载完毕(包含里面的元素)才会触发。...一种解决办法是,主页面上重要的元素加载完毕,再动态设置 iframe 的 SRC。 4、不利于 SEO 搜索引擎的检索程序无法解读 iframe。

    4.1K10

    深入理解iframe

    ,target="_blank" allow-pointer-lock iframe 中可以锁定鼠标,主要和鼠标锁定有关 可以通过 sandbox 里,添加允许进行的权限....但带来一些其它的问题:onload 事件以及连接池(connection pool) 2、阻塞页面加载 及时触发 window 的 onload 事件是非常重要的。...onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload 事件加载延迟,它给用户的感觉就是这个网页非常慢。...window 的 onload 事件需要在所有 iframe 加载完毕(包含里面的元素)才会触发。...一种解决办法是,主页面上重要的元素加载完毕,再动态设置 iframe 的 SRC。 4、不利于 SEO 搜索引擎的检索程序无法解读 iframe。

    4.2K10

    JavaScript 入门(下)

    例如点击一个按钮弹出一个对话框,就是鼠标点击触发事件,例如绿叶学习网教程文章中的点赞效果: 对于JavaScript的理解,就一句话:如果没有使用JavaScript,网页就是静态的,唯一的功能就是给用户浏览...语法: 1 window.open(URL, 窗口名称, 参数); 说明: URL:指的是打开窗口的地址,如果URL为空字符串,则浏览器打开一个空白窗口,并且可以使用document.write()方法动态输出...> 浏览器预览效果如下: 分析: window.onload表示页面加载完毕执行,“JavaScript页面相关事件”我们会详细讲解到。...> 浏览器预览效果如下: 分析: 这个例子使用在线测试不会有效果,请大家本地编辑器中测试预览。...5、页面相关事件 JavaScript中,常用的页面相关事件有3种: 方法 说明 onload 页面加载事件 onresize 页面大小事件 onerror 页面或图片加载出错事件

    1.1K20

    XSS相关Payload及Bypass的备忘录(上)

    目录 - 利用代码或POC - XSS获取数据 - UI修改 - JavaScript键盘记录器 - 标识一个XSS端点 - XSSHTML/应用程序 - XSSJavaScript封装中和...- mousedown事件中绕过引号 - 绕过点(.)的限制 - 绕过字符串的括号 - 绕过括号和分号 - 绕过 onxxxx= 黑名单 - 绕过空格过滤 - Bypass email...filter - 绕过文档黑名单 - 字符串中使用javascript绕过 - 使用其他方式绕过重定向限制 - 使用其他方式执行alert - 不使用任何东西绕过 ">" - 使用其他字符绕过...隐藏输入的XSS 使用 CTRL+SHIFT+X 触发onclick事件 DOM XSS #...该服务通过承载专门的XSS探测来工作,这些探测触发时扫描页面并将有关脆弱页面的信息发送给XSS Hunter服务。

    4.4K40

    JavaScript学习总结(六)

    浏览器对象模型中,把浏览器的各个部分都用了一个对象进行描述,如果我们要操作浏览器的一些属性,就可以通过浏览器对象模型的对象进行操作 下面我们来介绍一下浏览器对象模型的基本的对象: window 代表了一个新开的窗口...//setTimeout() 经过指定毫秒值执行指定 的代码一次 事件 定义:当发生一个事件之后,会触发特定的方法 那么如何注册一个事件呢?...事件的注册方式 //方式一: 直接在html元素上注册 function ready(){ alert("body的元素被加载完毕了...ondblclick 当用户双击对象时触发。 onmousedown 当用户用任何鼠标按钮单击对象时触发。 onmouseup 当用户鼠标位于对象之上时释放鼠标按钮时触发。...onfocus 当对象获得焦点时触发。 其他: onchange 当对象或选中区的内容改变时触发onload 浏览器完成对象的装载立即触发

    81720

    跨标签页通信的8种方式(上)

    (需要注意,和 js 对象相比,键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).当存储区域(localStorage 或 sessionStorage)被修改时,将触发 storage...}};window.open、window.postMessage通过一个标签页中使用window.open打开另一个标签页,并使用window.postMessage进行消息传递,可以实现跨标签页通信...例如,一个标签页中发送消息:const newTab = window.open('other.html');newTab.postMessage('Hello from Tab 1!'...通过Service Worker中监听和处理消息事件,可以实现跨标签页通信。...window.open、window.postMessage:通过一个标签页中使用window.open打开另一个标签页,并使用window.postMessage进行消息传递,可以实现跨标签页通信。

    73830

    客户端的js js脚本的引入 js的解析过程

    放在一个url里,这个url使用javascript:协议 两个用的很少 因为需要html和js分离,依据mvc进行分离,使得html变的结构化,易于阅读 script元素 下面是一个数字时钟使用onload...浏览器不会执行之间的代码 html中的事件处理程序 当脚本所在的html文件被载入的时候。脚本里的js会执行一次。...url中的js 应用用途 书签 通过协议类型指定url内容为任意字符串,该字符串是会被js解释器运行的js代码,其会被当成单独的一行代码实现。即语句之间必须使用分号作为分割。 即,书签的实现。...不会出现js阻塞页面ui的渲染。异步的时候执行是无序。 事件驱动的js js还能通过注册事件程序函数写程序。之后发生该事件的时候异步调用这些函数。...等待内部脚本执行完毕继续解析html节点,此时节点解析会暂停。

    13.1K80

    JavaScrtip之JS最佳实践

    ,支持这种伪协议但仅用了JavaScript功能的浏览器什么也不会做,总之,html文档里通过"javascript:"伪协议来调用javascript代码的做法非常不好。...2.使用内嵌的事件处理函数 事件处理函数将通过onclick方法来调用popUp()具体实现方式和我之前JS图片库的第一版一样http://www.cnblogs.com/GreenLeaves/...return false语句(老版本的浏览器中有用),这个链接不会真的打开。"...,我们不可能一个个的去加,而且将JS代码写在html标签里也十分的不合适,这点css已向我们证明,所以我们对上面的代码在做进一步的改进: window.onload=prepareLinks; //window.onload...2.合理的合并脚本固然重要,脚本html文档中的放置位置同样重要,因为每款浏览器都有他的"并发请求数",意思是同一时间针对同一域名的请求有数量限制,超过限制数目,其余的请求会被阻止,如果我们将脚本文件放到

    2.1K50

    Angular教程】-组件初识|8月更文挑战

    selector: 标注组件的名称,使用组件的时候使用的就是它 templateUrl: 标注html模板的路径 styleUrls: 标注html模板使用的样式的路径,我们看到是用的数组格式,说明传递多个样式文件应该是没有问题的...组件相关的其他文件暂时先放一放,Vue开发的时候我们创建好的组件总是要挂载才能使用的,那angular需要挂载吗?...)">触发一下 组件的ts文件中新增print函数 print(event: Event) { console.log('[ print ] >>', 'hello world', '事件类型:...' + event.type); } 组件的html模板中添加一个按钮来触发print函数 触发一下 双向绑定 双向绑定的构成...还有多少同学在用angular呀,要不是工作需要也不会再接触了,第一次学angualr还是15年。还有一点哈,原来都是pia pia贴代码,今天头一回自述的多,就当锻炼了,表述不周还请指正哈。

    1.9K20

    Angular 从入坑到挖坑 - 组件食用指南

    使用 @Output 装饰器配合 EventEmitter 实现 子组件中引入 Output 和 EventEmitter,通过 @Output 装饰器定义一个事件触发器,然后就可以通过这个事件触发器的...,就可以通过子组件上使用事件绑定的方式绑定到一个父组件事件通过 $event 获取到子组件传递的数据值 父组件内容: 2、使用 @Output 装饰器配合 EventEmitter...五、组件的生命周期钩子函数 当 angular 创建、更新、销毁组件时都会触发组件的生命周期钩子函数,通过组件中实现这些生命周期函数,从而介入到这些关键时刻 钩子函数 触发时机 ngOnChanges...被绑定的输入属性值发生变化时触发,会调用多次;如果没有使用到父子组件传值,则不会触发 ngOnInit 初始化组件时会调用一次,一般是用来构造函数之后执行组件复杂的初始化逻辑 ngDoCheck 只要数据发生改变就会被调用...后续只要页面数据有发生改变,都会触发这几个事件 ?

    15.8K30

    新窗口创建问题 | Electron 安全

    ,加载 c.html c 窗口使用 window.open 抢占 b 窗口,加载 w.html ,测试是否存在 Node.js 能力 执行测试 过了 2 秒 w.html 成功抢占 b 窗口,但其权限还是继承的...的文章中,进行 Discord RCE 时,使用 window.open 绕过了沙箱,具体操作是 window.open 加载和 Discord 同源或者允许的网页地址,之后立即通过 .location...,获取到读取的内容,之后通过 javascript 传递给攻击者,我们通过 alert 来证明我们可以获取到值 0x07 window.open 防御手段 window.open 执行时是会触发 web-contents-created...、_parent 和 _top 时就会被监听和拦截了 经过测试发现, frameName(target)设置为 _blank 时也会触发 'will-navigate' 事件,但导航事件可能在其他功能中使用到...点击链接,控制台打印要加载的地址,没有新窗口创建,也没有执行 Node.js ,'web-contents-created' 事件成功监听并拦截 a 标签创建新窗口的行为 将 action 的值设置为

    50110

    JS魔法堂:LINK元素深入详解

    其他浏览器均不会触发onload、onerror和onreadystatechange事件。      由于FF下存在上述特性,因此可以通过如下手段设置FF下的样式的disabled为true。...事件 和与之相关的 readyState属性 onload事件 ,当资源加载完成触发(注意:即使资源类型与LINK元素的type属性值不符,只要资源加载完成就会触发onload事件)。...onerror事件 ,当找不到资源时会触发(注意:IE5~11无论任何情况均不会触发事件) onreadystatechange事件 ,IE5~10下readyState变化就会触发事件。...通过DOM 0方式订阅事件     符号说明: N/A 表示该列事件触发 image.png 从表格数据得到以下规律: IE下   1. onerror绝对不会触发;       2....IE5~8中的onload事件均在readyState为"complete"且onreadystatechange事件触发触发,对于IE11中没有readyState属性和onreadystatechange

    3.3K100
    领券