有时候我们的网页会被别人内嵌别人的网页 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. Jenkins+maven+svn+tomcat持续集成环境

    前言 团队最近要把项目发布的工作拿过来,所以需要一个持续集成发布系统 直接上步骤. 下载 http://mirrors.jenkins-ci.org/war/latest/ 直接下载war包,我下载的 ...

  2. js收藏网页功能，纠正网上乱转没求证的案例

    网站一般流行以下收藏代码 function AddFavorite(title, url){ try{ //ie收藏 window.external.addFavorite(url, title); ...

  3. 在Java中如何优雅的停止一个线程？可别再用Thread.stop()了！

    写在开头 经过上几篇博文的学习,我们知道在Java中可以通过new Thread().start()创建一个线程,那今天我们就来思考另外一个问题:线程的终止 自然终止有两种情况: 1. 线程的任务执行 ...

  4. Windows改变终端字体后，终端一片黑 的解决办法

    使用Windows终端的时候总觉得字体不好看,于是乎按照网上的教程改了一下 注册表 计算机\HKEY_CURRENT_USER\Console%SystemRoot%_system32_cmd.exe ...

  5. Leetcode 1161 最大层内元素和

    一.题目 给你一个二叉树的根节点 root.设根节点位于二叉树的第1层,而根节点的子节点位于第2层,依此类推. 请返回层内元素之和 最大 的那几层(可能只有一层)的层号,并返回其中 最小 的那个. 示 ...

  6. 安装swagger过程及遇到问题

    参考:欢迎点击原文:https://www.cnblogs.com/liconglong/p/11477401.html(主要) https://blog.csdn.net/liangjiabao55 ...

  7. 今日学习：位运算&中国剩余定理

    -2^ 31的补码是-0.也就是 1000 0000 0000 0000 0000 0000 0000 0000 补码是原码取反加1 x&(-x) 是最低位为1的位为1,其余位为0. 中国剩余 ...

  8. 你是怎么理解ES6中Module的？使用场景？

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.介绍 模块,(Module),是能够单独命名并独立地完成一定功能的程序语句的集合(即程序代码和数据结构的集合体). 两个基本的特征:外 ...

  9. 记录-js基础练习题

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 隔行换色(%): window.onload = function() { var aLi = document.getElementsB ...

  10. Java22重磅发布！！！！卷不动了，真的卷不动了。。。。

    就在3月19日,Java22重磅发布.Java22新增了12项增强功能,其中包括七个预览特性和一个孵化器特性,这些功能都显著到足以引起JDK增强提案(JEPs)的关注.它们涵盖了Java语言.其API ...