有时候我们的网页会被别人内嵌别人的网页 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. ASP.NET Core MVC应用模型的构建[4]: Action的选择

    ControllerModel类型的Actions属性包含一组描述有效Action方法的ActionModel对象.对于定义在Controller类型中的所有方法,究竟哪些方法才能成为有效的Actio ...

  2. 【Application Insights】使用Powershell命令向Application Insgihts发送测试数据

    问题描述 在昨天的文章中,介绍了 "[Application Insights]使用CURL命令向Application Insgihts发送测试数据",今天则继续实验通过Powe ...

  3. 【Azure Redis 缓存】Redis Geo-replication(异地复制)的问题 

    问题描述 在Azure官网中,已列出了一系列的常规问题:https://docs.azure.cn/zh-cn/azure-cache-for-redis/cache-how-to-geo-repli ...

  4. rpa使用自带数据抓取方式抓取页面元素

    大家好,我是一方. 今天我们一起看一下如何使用rpa自带的功能来抓取自己想要的页面元素,这里我们以抖音为例来抓取某个领域的作者列表. 想要获取页面元素,大概的流程为:确定页面元素.分析页面元素.使用自 ...

  5. C++ //count_if //按条件统计元素个数 //自定义和 内置

    1 //按条件统计元素个数 2 //count_if 3 4 #include <iostream> 5 #include<string> 6 #include<vect ...

  6. Zabbix“专家坐诊”第186期问答汇总

    问题一 Q:这两个键值vm.memory.size[pused]和vm.memory.util监控内存使用率有什么区别,使用那个监控使用率更好,支持windows系统和Linux系统么,对agent端 ...

  7. 适用mybatis和jpa的全数据库类型主键生成插件，分布式高并发有序id生成器

    适用mybatis和jpa的全数据库类型主键生成插件,分布式高并发有序id生成器

  8. vscode 快速重新启动 reload Window

    vscode 快速重新启动 reload Window ctrl + shift + P 输入 reload

  9. 候捷-C++程序设计（Ⅱ）兼谈对象模型

    目录 笔记参考 学习目标 转换函数与explicit pointer-like classes function-like classes 模板template 模板特化与偏特化 模板模板参数 引用( ...

  10. pip 安装requirements.txt 的问题

    用新环境 在进行pip 安装的时候, 如果出现不进行安装 ,但是不报错就是满足条件,这个时候重新起一个shell,然后进行pip的安装.