首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

获得同级iframe页面的指定ID元素的几种实现方法

1.JS实现:   var object= window.parent.frames("要获得的iframe的name").contentDocument.getElementById("元素id");...2.jquery实现:   var object =$( "元素id", window.parent.frames("iframe的name").contentDocument); iframe获得父页面指定...id的元素的方法:   var object = $("元素id", window.parent.document); 父页面获得iframe子页面里指定id元素的方法:   var object =...$(this).contents().find("元素id"); 注:window.frames("iframe的name")、document.frames("iframe的name")和window.frames...["iframe的name"]、document.frames[""iframe的name"]的区别   1.第一个和第三个具有浏览器的兼容性,第二个和第四个只有在IE和Opera浏览器支持,而别的不支持

1.7K20

无界微前端是如何渲染子应用的?

将 UI 渲染到 shadowRoot 我们先来看看现代的前端框架,是如何渲染 UI 的 以 Vue 为例,需要给 Vue 指定一个 DOM 作为挂载点,Vue 会将组件,挂载到该 DOM 上 import.../comp.vue' // 传入根组件 const app = createApp(Comp) // 指定挂载点 app.mount('#app') 挂载到 #app,实际上使用 document.querySelector...查找 DOM,然后挂载到 DOM 里面 但是正如上一小节说的,在无界微前端会有问题: • 如果在 iframe 中运行 document.querySelector,就会在 iframe 中查找就会查找不到...,有些需要挂载到 iframe 中。...这里直接举个例子: • onunload 事件,需要挂载到 iframe 中 • onkeyup 事件,需要挂载到主应用的 window 下(iframe 中没有 UI,UI 挂载到主应用 document

1K30

无界微前端是如何渲染子应用的?

将 UI 渲染到 shadowRoot我们先来看看现代的前端框架,是如何渲染 UI 的以 Vue 为例,需要给 Vue 指定一个 DOM 作为挂载点,Vue 会将组件,挂载到该 DOM 上import.../comp.vue' // 传入根组件const app = createApp(Comp)// 指定挂载点app.mount('#app')挂载到 #app,实际上使用 document.querySelector...查找 DOM,然后挂载到 DOM 里面但是正如上一小节说的,在无界微前端会有问题:如果在 iframe 中运行 document.querySelector,就会在 iframe 中查找就会查找不到,...,有些需要挂载到 iframe 中。...这里直接举个例子:onunload 事件,需要挂载到 iframe 中onkeyup 事件,需要挂载到主应用的 window 下(iframe 中没有 UI,UI 挂载到主应用 document 的 shadowRoot

5.1K30

怎么防止同事用Evil.js的代码投毒

我们还可以在浏览器里通过iframe创建一个被隔离的window, iframe被加载到body后,获取iframe内部的contentWindowlet iframe = document.createElement...('iframe')iframe.style.display = 'none'document.body.appendChild(iframe)let {JSON:cleanJSON} = iframe.contentWindowconsole.log...ShadowRealm api,已经stage3了,可以手动创建一个隔离的js运行环境,被认为是下一代微前端的利器,不过现在兼容性还不太好,代码看起来有一丢丢像eval,不过和vm的问题一样,需要我们指定某段代码执行更多...Promise.prototype.then和我们备份的是否相等,就可以甄别出原型链有没有被污染 ,我真是一个小机灵首先我们要备份相关函数,由于我们需要检查的不是很多,就不需要对window进行遍历了,指定几个重要的...checkNative就可以啦,存储在_snapshot和_prototype里的内容,嘎嘎遍历出来,和当前运行时获取的JSON,Promise.prototype.then对比就可以啦,而且我们有了备份, 还可以一个

3K20

怎么防止同事用Evil.js的代码投毒

创建一个被隔离的window, iframe被加载到body后,获取iframe内部的contentWindowlet iframe = document.createElement('iframe')...('iframe')iframe.style.display = 'none'document.body.appendChild(iframe)let {JSON:cleanJSON} = iframe.contentWindowconsole.log...ShadowRealm api,已经stage3了,可以手动创建一个隔离的js运行环境,被认为是下一代微前端的利器,不过现在兼容性还不太好,代码看起来有一丢丢像eval,不过和vm的问题一样,需要我们指定某段代码执行更多...Promise.prototype.then和我们备份的是否相等,就可以甄别出原型链有没有被污染 ,我真是一个小机灵首先我们要备份相关函数,由于我们需要检查的不是很多,就不需要对window进行遍历了,指定几个重要的...checkNative就可以啦,存储在_snapshot和_prototype里的内容,嘎嘎遍历出来,和当前运行时获取的JSON,Promise.prototype.then对比就可以啦,而且我们有了备份, 还可以一个

3.6K20

nf-Press —— 在线文档也可以加载组件和编写代码

组件定位 如果组件只能在文档末尾加载,那么不是太好看,所以还需要一个“定位”功能,在文档里面指定加载位置。...我们可以直接在 md 格式的文档里面一个div,设置属性即可: <div id="test2" data-key="testComponent" data-props='{"msg":"div...这样在查看文档的时候,组件就会被加<em>载到</em>这个div里面。 看看效果 在线编写代码、修改代码、运行代码 我知道有很多第三方网站提供了完整的在线写代码的功能,一些官方文档也在用,但是总感觉有点“距离感”。...<em>iframe</em> + CDN 搞不定问题怎么办?绕过去吧。于是开启了古老的 <em>iframe</em>。... import { defineComponent, watch

30820

作为window对象属性的元素 多窗口和窗体

div> 1111 1111 好吧,因为浏览器厂商可以随便给属性...当一个脚本这样做,多个窗口可以相互操作 iframe 已经处于半废弃的inframe标签。挺无奈的,已经快废了。 不过学习还是学习一下吧 iframe是用来嵌套多个文档的。...由iframe所创建的嵌套浏览上下文是用自己的window对象表示的。每一个iframe都是一个独立的window对象。 对于客户端js来说,窗口,标签页,iframe和框架都是浏览上下文。...(或者递归打开的窗口),脚本才能通过名字指定存在的窗口,或者如果是一个窗口内嵌在另一个窗口里的窗体,那么在它们的脚本之间可以相互导航。...并同时可以作为标签a和标签form的taget的值,表示加载到哪 open第三个参数表明如何打开这个标签的,以及大小(一般弹窗广告喜欢这样做) // 打开允许改变大小的浏览器的窗口,包含地址栏,工具栏和地址栏

2.1K50

关于 Web Content-Security-Policy Directive 通过 meta 元素指定的一些测试用例

Content Security Policy 是一种使用标题或 meta 元素来限制或批准加载到指定网站上的内容的策略。 这是一个广受支持的安全标准,所有网站运营者都应该对这些标准了然于心。...作为容器,定义 iframe 的 web 应用,监听在 3000 端口:wechat 文件夹下 嵌入了另一个网页,监听在 3002 端口,Jerrylist 文件夹下面: 如果 Jerrylist...文件夹下的 csp html 里没有声明任何 csp 相关的 Directive(通过 meta 标签),则 iframe 工作正常: 测试1:3000 应用(即嵌入 3002 应用的 web 应用里...src="http://localhost:3002/csp"> 测试结果: Refused to frame ‘http://localhost:3002/’.../localhost:3002/csp"> 下列代码也工作:

46720
领券