载入的iframe页面会挡住父级页面一切冒泡事件，怎么破？

dsc0003 2017-03-16 11:43:51

父页面



<html>

<body style="width:100vw;height:100vh;">

<iframe src="child.html"></iframe>

</body>

</html>

<script>

document.querySelector("body").addEventListener("touchstart", function(){

        console.log(111111)

    }, true)

</script>

子页面 child.html



<html>

<body style="width:100vw;height:100vh;">

testtest

</body>

</html>

<script>

document.querySelector("body").addEventListener("touchstart", function(){

        console.log(22222)

    }, true)

</script>

现在是只能出发 child.html 的事件，
我要同时触发父级页面和子集页面的事件

...全文

410 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

斯洛文尼亚旅游 2017-03-16

打赏
举报

回复

父页的事件单独出一个函数来，如parentTouch，子页调用parent.parentTouch()

最近遇到个坑，页面引入了一个iframe，结果页面上所有的点击事件都失效了。解决办法是手动绑定iframe里面事件，在事件里面触发当前窗口事件 // 点击了不触发 document.body.addEventListener('click', () => {console.log(43434343)}) // 在iframe里面手动触发 $('#iframe').contentWindow.document.body.addEventListener('click', () => {

前言：最近项目遇到的问题，项目的所有菜单点击会出现对应的子页面，同时出现本页面的选项卡，（之后类似于选项卡的操作，不过选项卡的标签是由点击的菜单组合而成）。类似效果如下：实现方法：点击每个菜单的时候，下面的内容由iframe 切换，同时创建选项卡......。问题：由于所有的子页面是由iframe 链接进去，所以在iframe上的遮罩层不会遮住完成的dom,导致外层的按钮还能操作。 ...

把原来在IFRAME中的DIV放到它的父页面,这样在IFRAME中弹出父页IFRAME面的DIV就不会被其他IFRAME挡住了

来自：http://www.cnblogs.com/willpower/archive/2007/06/20/790114.aspx

经常会遇到这样一种情况。在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快，或许我们感觉不到页面载入的不同步，但试想，如果一个需要内嵌到iframe里的页面的响应很慢，这里会出现一种什么现象呢？这时将会出现所有页面已经载入完成，但在iframe元素处，将会出现空白，直到内嵌页面完成载入时，该空白处才会显示新载入的页面。可想而知，一个页面如果长时间的空白，对于浏览者来

因为没有直接改第三方平台的代码以及配置，没办法，只能配置我们自己项目的nginx，把http改成https。改了之后重启NGINX，页面加载终于不报错了，但登录一直有问题，看了一下才发现，我们项目前端是把token存在cookie中，但浏览器不允许在iframe页面写cookie，试了一下，sessionStorage可以正常使用，于是把cookie存储方式由cookie改成sessionStorage，重新打包发布后，终于一切都正常。根据该平台要求填完地址后，发现页面无法正常加载。

87,993

社区成员

224,689

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章