有时候我们的网页会被别人内嵌别人的网页 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. SpringCloud使用Kafka消费者

    目录 POM文件配置 创建kafka配置 系统配置信息 启动入口 POM文件配置 <project xmlns="http://maven.apache.org/POM/4.0.0&q ...

  2. 【Azure 应用服务】应用服务连接 Azure MySQL 一直失败，报错 Create connection error

    问题描述 App Service上部署的Java应用,连接 Azure Database for MySQL 失败.错误信息:Create connection error, url: jdbc:my ...

  3. 【Azure 存储服务】关于Azure Storage Account(存储服务) 基于AAD用户的权限设定以及SAS key的管理问题

    问题描述 如何查到一个Storage Account曾经创建过多少SAS key,这些Key是否可以回收和限定?能否基于AAD身份对 Container / Folder 进行权限的设定和管理? 问题 ...

  4. C++ //统计元素个数 //统计内置数据类型 //统计自定义数据类型

    1 //统计元素个数 2 3 #include<iostream> 4 #include<string> 5 #include<vector> 6 #include ...

  5. 解决网页无法复制粘贴选中的问题 显示vip无法复制解决方案

    方法:先是按F12打开控制台点击console输入以下代码!!!! 解决网页禁止鼠标右键,无法被选中的 第一种: javascript:(function() { function R(a){ona ...

  6. C#拾遗补漏之goto跳转语句

    前言 在我们日常工作中常用的C#跳转语句有break.continue.return,但是还有一个C#跳转语句很多同学可能都比较的陌生就是goto,今天大姚带大家一起来认识一下goto语句及其它的优缺 ...

  7. 读书笔记:CSAPP 11章 网络编程

    深入理解计算机系统 第11章 本章代码:Index of /afs/cs/academic/class/15213-f15/www/code/22-netprog2 其中包含本章课本示例代码,测试 T ...

  8. 记一次docker安装Jenkins

    docker安装Jenkins 0. 下载docker镜像 docker search jenkins docker pull jenkins/jenkins:lts 1. 安装步骤 创建映射文件夹 ...

  9. WPF之x命名空间

    目录 x命名空间内容 x命名空间的Attribute x:Class x:ClassModifier x:Name x:FieldModifier x:Key x:Shared x命名空间的标记扩展 ...

  10. 【LLM】在Colab上使用免费T4 GPU进行Chinese-Llama-2-7b-4bit推理

    一.配置环境 1.打开colab,创建一个空白notebook,在[修改运行时环境]中选择15GB显存的T4 GPU. 2.pip安装依赖python包 !pip install --upgrade ...