有时候我们的网页会被别人内嵌别人的网页 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. 【Azure 应用程序见解】通过无代码方式在App Service中启用Application Insights后，如何修改在Application Insights中显示的App Service实例名呢？

    问题描述 在App Service中,可以非常容易的启动Application Insights服务.默认情况中,在Application Insights中查看信息时候,其中的对象名称默认为App ...

  2. Git 系列：简介安装以及配置管理

    目录 简介安装 简介 Centos安装 配置管理 git help 概要 选项 示例 git-doc git config 概要 选项 变量 示例 初始化配置 简介安装 简介 https://git- ...

  3. MK5 机械键盘 说明书

    FN + 右箭头 就是加快节奏 FN + ScrLk 就是切换模式

  4. stars-one的原创工具——文档生成器

    Github 可以快速生成静态页面文档的工具,适用于文档翻译或者是个人项目,个人开发者可以快速将生成的静态页面部署在gitee或者github上 优点 规范 使用流行的markdown格式编写文档 美 ...

  5. python学习笔记（2）： 函数式编程

    函数式编程 高阶函数 map() map接受一个函数和一个可迭代对象(Iterable),返回一个map对象(Iterator) def f(x): return x*x list(map(f, [1 ...

  6. 掌握python的dataclass，让你的代码更简洁优雅

    dataclass是从Python3.7版本开始,作为标准库中的模块被引入.随着Python版本的不断更新,dataclass也逐步发展和完善,为Python开发者提供了更加便捷的数据类创建和管理方式 ...

  7. 在winform中如何实现双向数据绑定？

    什么是双向数据绑定? 双向数据绑定是一种允许我们创建持久连接的技术,使模型数据和用户界面(UI)之间的交互能够自动同步.这意味着当模型数据发生变化时,UI会自动更新,反之亦然.这种双向数据绑定极大地简 ...

  8. 更智能的广告素材生成！看A/B测试如何驱动AIGC素材调优

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 前言:AIGC大爆发,引发广告营销行业变革 ChatGPT等AI产品引发的AIGC大爆发引起了各行业的震动,其中以 ...

  9. FreeMarker介绍及基本数据类型和用法

    FreeMarker介绍及基本数据类型和用法 FreeMarker 中文官方参考手册 FreeMarker 英文官方参考手册 一.FreeMarker介绍 FreeMarker 是一款 模板引擎: 即 ...

  10. AntSK 0.2.3 版本更新：轻松集成 AI 本地离线模型

    大家好,今天和大家分享 AntSK 知识库/智能体项目的最新进展. AntSK 是一个基于 .Net 8.Blazor 及 SemanticKernel 开发的 AI 项目,旨在为开发者提供一个强大的 ...