H5监听Iframe内部点击实现正常跳转
2018-10-23 本文已影响28人
饮水思源为名
近期开发中，在布局中使用了IFrame做主页切换，大概布局就是底部一个选择卡，往上就是多个IFrame，点击选择卡切换页面。
问题：
我其中一个页面是消息列表，点击后跳转详情页，但是跳转后由于是IFrame内部处理跳转，底部选择卡不会消息。
解决方法：
需要在Iframe的内部点击事件监听处理的时候，不让IFrame的内部跳转，而是整个主页面跳转。
而主页面是Ifarme的父页面，可以通过window.parent直接达到效果。
布局代码:
<body>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#message">
<span class="mui-icon mui-icon-chat">
<!--<span class="mui-badge">9</span>-->
</span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item " href="#work">
<span class="mui-icon mui-icon-compose"></span>
<span class="mui-tab-label">工作</span>
</a>
</nav>
<div class="mui-content">
<div id="message" class="mui-control-content mui-active insidePage" >
<iframe class="insidePage" src="../../message/html/message.html?messageType=base" ></iframe>
</div>
<div id="work" class="mui-control-content insidePage">
<iframe class="insidePage" src="../../work/workView/html/work_bnaner.html" ></iframe>
</div>
</div>
</body>
监听代码
this.startPageJump = function(config,isIframe) {
var extras = "";
for(var key in config.extras) {
extras += ("&" + key + "=" + config.extras[key]);
}
if(isIframe){
window.parent.location.href = config.url + "?" + extras;
}else{
window.location.href = config.url + "?" + extras;
}
}
