iframe防止页面套娃

发布于:2021-12-03 02:51:08

开发工具与关键技术:VS and Js
作者:代富强
撰写时间:2021.5.7

分享一下我在写网页的时候遇到的一个小问题,在把一个页面嵌套进另一个页面的时候,例如在主页面点击一个东西然后把子页面显示出来,容易把主页面嵌套进主页面从而导致无限套娃。需要一个div盒子来装页面、一个跳转链接(被嵌套进另一个页面的页面链接)、一个点击事件。这里我们设嵌套页面的大页面为页面1;被嵌套进另一个页面的小页面为页面2。
这是主页面(页面1)的样子:

这是页面2的样子:

首先在页面1布局写出一个div盒子(宽高可以自己想设多少设多少),再在div盒子里写iframe,给iframe一个id。代码见下:



然后用js给它写一个点击事件用来跳转页面代码, 写完点击事件后嵌套工作就算完成了


可以看到页面2中是有写增、删、查、改功能的,另外还有写导入导出和退出功能,退出功能是点击退出按钮返回到主页面。但是这里就容易出现套娃现象,把跳转的主页面跳转到了嵌套的地方去了。见下图:

这个时候就需要把页面1设为顶级页面,这样页面1就不会被页面2给再次嵌套,或许这会让你感到很苦恼,但其实这并不难,只需要在页面1写一个方法就可以完成:
(function (window) {
if (window.location !== window.top.location) {
window.top.location = window.location;
}
})(this);

相关推荐

最新更新

猜你喜欢