主界面跳转到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;
	    //  以下自定义相关界面规范		
	}
});
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐