iframe中返回

iframe中返回,可能会整个页面赋值给ifame。

解决办法:

在父页面中定义src:

var frameSrc;
//页面加载完成之后
$(function(){
	frameSrc = $("#buttomIframe").prop("src");
})
在子页面中返回时:

if(parent){
parent.$("#buttomIframe").prop("src",parent.frameSrc);
}

可参考 prop和attr的区别

### iframe 实现返回上一页功能的方法 在 HTML 中,`iframe` 是一种嵌入式框架,允许在一个网页中加载另一个网页。当用户希望在 `iframe` 中实现返回上一页的功能时,可以通过 JavaScript 操作浏览器的历史记录来实现。以下是一个详细的实现方法[^1]: ```javascript function goBackInIframe() { var iframe = document.getElementById("myIframe"); if (iframe.contentWindow && iframe.contentWindow.history.length > 1) { iframe.contentWindow.history.back(); } else { alert("没有可返回的页面!"); } } ``` 上述代码通过获取 `iframe` 的 `contentWindow` 对象访问其内部的历史记录,并调用 `history.back()` 方法实现返回上一页的功能[^1]。 需要注意的是,如果 `iframe` 加载的内容来自不同的域(跨域),则会受到同源策略的限制,无法直接操作 `iframe` 内部的历史记录。此时需要通过服务器端配合或使用 `postMessage` API 进行跨域通信[^1]。 ### 示例代码 以下是一个完整的示例,展示如何在包含 `iframe` 的页面中实现返回上一页的功能: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Iframe 返回上一页示例</title> </head> <body> <iframe id="myIframe" src="https://example.com/page1" width="600" height="400"></iframe> <br> <button onclick="goBackInIframe()">返回上一页</button> <script> function goBackInIframe() { var iframe = document.getElementById("myIframe"); if (iframe.contentWindow && iframe.contentWindow.history.length > 1) { iframe.contentWindow.history.back(); } else { alert("没有可返回的页面!"); } } </script> </body> </html> ``` 此代码展示了如何创建一个按钮,点击后触发 `goBackInIframe` 函数,从而实现 `iframe` 内部页面的返回功能[^1]。 ### 注意事项 1. 如果 `iframe` 的内容与主页面不在同一域下,则无法直接操作其历史记录。 2. 用户体验应被优先考虑,确保在调用返回功能时不会导致不可预期的行为。 3. 在某些情况下,可以结合 `localStorage` 或其他存储机制保存页面状态,以增强返回功能的可用性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值