近期开发中,在布局中使用了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;
}
}