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

发布时间:2021-02-25 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了iframe标签刷新页面停留在当前页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

整体思路:在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,url);

},false)

// iframe模板刷新后页面跳转问题解决--end

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

// iframe标签内连接跳转,刷新停留在当前页面

function changeUrl(elem) {

loadIframe(elem.attr('href'));

}

iframe标签内调用父页面js方法用 window.parent.jsfun() 调用。

来自:https://my.oschina.net/u/2301293/blog/3033667

总结


以上是前端之家为你收集整理的iframe标签刷新页面停留在当前页全部内容,希望文章能够帮你解决iframe标签刷新页面停留在当前页所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。