有时候我们的网页会被别人内嵌别人的网页 iframe 中，我们只需要在页面中增加以下js就可以让我们的页面内容单独显示出来，不被嵌入到 iframe中

核心JS代码

<script>

    if(top.location != self.location){         // 检查当前页面是否处于浏览器顶层

        top.location.replace(self.location);   // 将浏览器顶层页面内容替换为当前页面内容

    }

</script>

完整示例：

a.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    我是外层网页

    <iframe src="./1.html" frameborder="0"></iframe>

</body>

</html>

1.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    我是内嵌网页

    <script>

        if(top.location != self.location){         // 检查当前页面是否处理浏览器顶层

            top.location.replace(self.location);   // 将浏览器顶层页面内容替换为当前页面内容

        }

    </script>

</body>

</html>

在浏览器中打开 a.html，后的结果：--会直接打开1.html

js小demo-迫使页面总是单独显示，不能被嵌入到iframe中的更多相关文章

  1. session失效刷新后登录页面嵌入在iframe中的前台解决办法

    在前台登录页面中加入JS代码,判断登录页面是否在iframe中,在iframe中就跳转出去 例: //判断是否在iframe中,在里面就跳出去 if (top.location.href != loc ...

  2. iframe中子页面通过js计算高度（使得页面不会显示不全）

    使用过iframe的人,都知道,它是一个模版,里面有一个iframe,而iframe当中,是可以嵌套多个页面的.(比较常见的问题,就是iframe页面中,经常会出现内容显示不全的时候). 谨记,通过j ...

  3. 微信小程序web-view页面安卓下显示空白的解决办法!!!

    web-view页面在你向地址拼接参数展示页面时,在安卓上有时会显示空白 解决方案: A: 普通不需要参数的话可以直接把地址写在src里,不要去在onLoad里获取你的全局变量后再赋值. B: 如果需 ...

  4. EasyUI 解决Js动态加载页面样式不显示问题

    var strHtml = "<input name='mydate' class='easyui-datebox'>"; 直接使用append把内容加载到页面中,Ea ...

  5. 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 每天一个JS 小demo之日历制作。主要知识点：日期函数

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用

    @charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...

  8. 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  9. Vue.js小demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 每天一个JS 小demo之“随机”抽奖。主要知识点：Math函数，数组方法，递归

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

随机推荐

  1. Jepsen 测试框架在图数据库 Nebula Graph 中的实践

    在本篇文章中主要介绍图数据库 Nebula Graph 在 Jepsen 这块的实践. Jepsen 简介 Jepsen 是一款用于系统测试的开源软件库,致力于提高分布式数据库.队列.共识系统等的安全 ...

  2. Ubuntu上文件系统根目录磁盘空间扩充

    今天使用Ubuntu的时候,出现了磁盘根目录空间不足的提示,需要我们对于根目录磁盘空间进行扩充. 1.打开终端输入命令,安装gparted管理器 sudo apt-get install gparte ...

  3. GB 2312字符集：中文编码的基石

    一.GB 2312字符集的背景 GB 2312字符集是中国国家标准委员会于1980年发布的一种中文字符集,是中国大陆最早的中文字符集之一.GB 2312字符集的发布填补了中国大陆中文编码的空白,为中文 ...

  4. 关于debian11无法安装星火商店的解决方法

    #!/bin/bash if [ "$(id -u)" != "0" ] then echo "请确保你使用root权限启动此脚本" exi ...

  5. C++B树的实现

    B树的实现 今天我们就来实现以下B树,B树有什么特点那?我们来列举一下 每个非叶子节点中存放若干关键字数据,并且有若干指向儿子节点的指针.指针数目=关键字数目+1 根节点有最少1个,最多m-1个关键字 ...

  6. 22_播放器之使用SDL显示YUV视频

    简介 使用SDL实现简单的YUV播放器. 这里还需要使用到像素格式和计算图片大小,这两个我们直接使用ffmpeg来实现,因此需要使用ffmpeg的libavutil/avutil.h和libavuti ...

  7. CentOS 同时安装多个版本的Python3

    1.背景 已安装了 Python3.6.4,需要再安装 Python3.9 版本 2.操作步骤 (1)寻找当前 Python3.9 版本最新稳定版的子版本 通过官网查找,目前为 3.9.18,下载到本 ...

  8. 译：使用现代的 Node.js 构建简单的CLI工具

    原文地址: https://evertpot.com/node-changelog-cli-tool/ 作者: Evert Pot 发布时间:2023-02-13 只使用 Node.js 的标准库,不 ...

  9. 3DCAT v2.1.3新版本发布，这三大功能更新你不容错过！

    3DCAT实时渲染云在近期发布了新的公有云v2.1.3的版本,本次主要更新了应用页的三项功能「语音交互设置」.「多点触控」.「音频信号位深」. 小编将对这三项更新进行讲解: 1. 调整语音通讯机制 新 ...

  10. [极客大挑战 2019]web部分题解（sql部分已完结，其他部分正在更新，出去吃个饭先）

    [极客大挑战 2019]BabySQL 打开环境后有登录界面◕‿◕ 一眼注入,后先试试万能密码: username:admin' or '1'='1 password:1 GG,出大问题,我就会这一招 ...