框架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;
	    //  以下自定义相关界面规范		
	}
});