有时候我们的网页会被别人内嵌别人的网页 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. 钉钉机器人自动关联 GitHub 发送 approval prs

    摘要:用技术来解决 PM 枯燥的 approval pr 工作,本文将阐述如何自动化获取 GitHub Organization 下各个 repo 待 merge 的 pull requests 并通 ...

  2. redis分片sharding实现原理

    为什么集群? 通常,为了提高网站响应速度,总是把热点数据保存在内存中而不是直接从后端数据库中读取.Redis是一个很好的Cache工具.大型网站应用,热点数据量往往巨大,几十G上百G是很正常的事儿,在 ...

  3. 十步带你用IDEA创建一个WEB项目及部署（Tomcat）

    部署一个web项目首先需要安装Tomcat,还没安装的朋友们可以看一下我这个博客: https://www.cnblogs.com/deyo/p/17241878.html 第一步:打开Idea-新建 ...

  4. Kubernetes CKA考试之Killer Simulator（上）

    写在前面 个人微信公众号:密码应用技术实战 个人博客园首页:https://www.cnblogs.com/informatics/ 注:学习交流使用 CKA Simulator Kubernetes ...

  5. springboot多数据源配置理解

    今天研究项目的多数据源配置,产生了一点疑惑,有很多地方没有指定数据源,那么spring如何知道连接哪一个呢?让我们从头开始梳理吧. 首先是数据源配类 其中使用到了两个数据源,项目采用读写分离,一个主库 ...

  6. 用python生成正玄波信号源码解析

    一 前记 项目需要生成不同频点的正玄波信号,没找到现成的软件,只能自己写一个了.顺便温习一下python. 二 源码解析: #!/usr/bin/python import numpy as np f ...

  7. 超低延时超低功耗的2.4G无线音频收发解决方案特色解析

    为什么是我们?   团队从做芯片开始,一直在无线领域这个圈子里面混.从刚开始的wifi芯片,到后面的bt芯片,再到后面的音频算法,再到后面一起创业,做无线音频解决方案.随着和客户关系的逐渐深入,团队慢 ...

  8. SPEAK 510全向麦克风无线蓝牙拾音器产品体验及评测

    产品简介     大家开会的时候,很多人都直接使用手机app了,比如,zoom,腾讯会议等.既方便又快捷.由于手机设备拾音距离有限,也不是针对会议场景做的,所有,在多人会议的时候,问题就出来了.这个时 ...

  9. 3DCAT+上汽奥迪：打造新零售汽车配置器实时云渲染解决方案

    在 5G.云计算等技术飞速发展的加持下,云渲染技术迎来了突飞猛进的发展.在这样的背景下,3DCAT应运而生,成为了业内知名的实时云渲染服务商之一. 交互式3D实时云看车作为云渲染技术的一种使用场景,也 ...

  10. python面向对象（多态）

    # 1.什么是多态:同一事物有多种形态 class Animal: # 同一类事物:动物 def talk(self): pass class Cat(Animal): # 动物的形态之一:猫 def ...