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

此生再无相见时 提交于 2020-02-29 02:11:36

整体思路:在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 里面有些错误!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!