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

近期开发中,在布局中使用了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;
        }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 元素会创建包含另外一个文档的内联框架(即行内框架); 一、align 属性(不赞成) align属性规定ifram...
    puxiaotaoc阅读 19,852评论 0 14
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,079评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 红尘莫问世俗事,为人心中贵自知 。 你将人生比做酒,我把花开写成诗 。
    乐乎斋收藏会馆阅读 1,462评论 2 11
  • 现在对于家长来说,教育孩子是一个巨大的工程,社会当中各种针对孩子的教育培训也是眼花缭乱,除了补习班、兴趣班之外还有...
    挚爱灵魂阅读 1,183评论 0 0