iframe标签刷新页面停留在当前页

最新推荐文章于 2024-08-22 20:35:58 发布

weixin_34038652

最新推荐文章于 2024-08-22 20:35:58 发布

阅读量1.3k

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2301293/blog/3033667

版权

2019独角兽企业重金招聘Python工程师标准>>>

整体思路：在iframe所在当前页面地址url后拼接 #+targetUrl

<a href="url" target="iframeId" onclick="loadIframe（$(this)）">a标签跳转iframe</a>

// iframe模板刷新后页面跳转问题解决--start
    function loadIframe(url) {
        //获取url链接
        var u = window.location.href;
        //因为每次获取的链接中都有之前的旧锚点，
        //所以需要把#之后的旧锚点去掉再来加新的锚点（即传入的url参数）
        var end = u.indexOf("#");
        var rurl = u.substring(0,end);
        if(rurl == ''){
            rurl="当前页面url"
        }
        //设置新的锚点
        window.location.href = rurl + "#" + url;
    }

    window.onhashchange = function() {
        //location.hash取到的是url链接中#(包括自己)后面的内容
        var hash = location.hash;
        //去掉#号，得到的就是我们要设置到iframe中src上的地址
        var url = hash.substring(1,hash.length);
        $("#iframeId").attr("src", url);
    }

    document.addEventListener('DOMContentLoaded', function () {
        var hash = location.hash;
        var url = hash.substring(1,hash.length);
        $("#iframeId").attr("src", url);
    }, false)
    // iframe模板刷新后页面跳转问题解决--end

iframe标签内a标签跳转，父页面添加如下方法

// iframe标签内连接跳转，刷新停留在当前页面
    function changeUrl(elem) {
        loadIframe(elem.attr('href'));
    }

iframe标签内调用父页面js方法用 window.parent.jsfun() 调用。参考网址：https://www.cnblogs.com/zhuxiaojie/p/5990262.html 里面有些错误！

转载于:https://my.oschina.net/u/2301293/blog/3033667