框架iframe的界面跳转的运用
主界面跳转到iframe中的子界面
以下是一种常见的方法:
在主界面中,可以使用以下代码来定义一个链接或按钮,当点击时触发跳转事件:
<a href="javascript:void(0);" onclick="loadSubpage()">跳转到子界面</a>
在JavaScript代码中,可以编写一个函数loadSubpage()来实现跳转到子界面的逻辑:
function loadSubpage() {
var iframe = document.getElementById("myIframe"); // 获取iframe元素
iframe.src = "subpage.html"; // 设置子界面的URL
}
在上述代码中,假设iframe的id属性为"myIframe",并且要跳转到的子界面的URL是"subpage.html"。通过修改iframe的src属性,可以改变嵌入的网页内容,从而实现跳转到子界面。
首先是我们正常的跳转(内部来跳,类型a标签的href):
window.location.href = url
此时只能在iframe框架的主界面切换 而 无法跳转到iframe之外的界面。
iframe子界面跳转到外部界面
可以使用以下方法:
1、在iframe子界面的JavaScript代码中,使用window.top.location.href
来修改外部界面的URL。
例如:
window.top.location.href = "外部界面的URL";
2、如果iframe子界面嵌套在多个层级的父级iframe中,可以使用window.parent.location.href
来跳转到最外层的父级iframe或外部界面。
例如:
window.parent.location.href = "外部界面的URL";
3、另一种方法是使用window.open()
函数打开一个新窗口或标签页,并指定外部界面的URL。
例如:
window.open("外部界面的URL");
这些方法可以在iframe子界面中的JavaScript代码中使用,以实现跳转到外部界面的操作。
由于浏览器的同源策略限制,如果iframe子界面和外部界面的域名不同,需进行跨域配置才可访问外部界面。
主界面A跳转到界面B中iframe框架中的子界面C
1、在界面A中利用a标签的href
属性携带界面地址与参数。
<a href="main.html?page=1">我的订单</a>
<a href="main.html?page=2">我的购物车</a>
...
2、在含有iframe页面B中用jquery接收判断传递过来的参数。
3、然后获取iframe的id,根据参数设置iframe的src,显示指定的子页面C。
$(function () {
// var href = window.location.href; //获取当前页面的URL
// var page = href.substring(href.lastIndexOf('?')); //截取问号后面的内容
// 字符串,可设置或返回当前 URL 的查询部分(问号 ? 之后的部分)。
let page = location.search;
switch(page ){
case '?page=1' :
$("#memMain").attr("src", "order.html");// 设置iframe的src
break;
case '?page=2' :
$("#memMain").attr("src", "cart.html");
break;
// 以下自定义相关界面规范
}
});
更多推荐
所有评论(0)