H5监听Iframe内部点击实现正常跳转

Posted 2023-04-26

参考技术A 近期开发中，在布局中使用了IFrame做主页切换，大概布局就是底部一个选择卡，往上就是多个IFrame，点击选择卡切换页面。

我其中一个页面是消息列表，点击后跳转详情页，但是跳转后由于是IFrame内部处理跳转，底部选择卡不会消息。

需要在Iframe的内部点击事件监听处理的时候，不让IFrame的内部跳转，而是整个主页面跳转。
而主页面是Ifarme的父页面，可以通过window.parent直接达到效果。

页面嵌套iframe后，点击里面的链接，然后父窗口跳转（子窗口控制父窗口的链接跳转）

    做app的时候遇到一个问题，一个页面，然后里面嵌套了一个另一个页面，想实现点击里面的链接，然后外面进行跳转，不然的话，里面的页面永远出不来，

后面想了个办法，app的页面都是打开打开，不关闭的，然后由上一个页面用postmessage进行监听，然后子窗口发送信息给父窗口，父窗口接到信息后进行

页面跳转，Android可以，然而ios却不行，坑了；只能想另外一种办法， app打开页面不是都不会关闭的嘛，然后让这个top页面去轮询读取cookie，目标页面

判断请求头部，是否为移动端访问（因为目标页面是pc端页面，app要实现父窗口跳转到移动端的页面），是的话请求app项目下面的另一个H5页面，然后往

app这个域名里面写cookie，之后那个top页面读取到就进行跳转；然后最近被人纠正了一下，喔靠，原来那么简单，以父子窗口跳转到同一页面为例子，只需要

if (top.location != self.location) {  
 top.location=self.location;  

 }  

这么一段就可以了，真的是深刻的领悟啊，那么简单的问题，搞那么复杂，追究起来还是自己对有些东西不太深究，知识有漏洞。