js小demo-迫使页面总是单独显示，不能被嵌入到iframe中
有时候我们的网页会被别人内嵌别人的网页 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中的更多相关文章
- session失效刷新后登录页面嵌入在iframe中的前台解决办法
在前台登录页面中加入JS代码,判断登录页面是否在iframe中,在iframe中就跳转出去 例: //判断是否在iframe中,在里面就跳出去 if (top.location.href != loc ...
- iframe中子页面通过js计算高度（使得页面不会显示不全）
使用过iframe的人,都知道,它是一个模版,里面有一个iframe,而iframe当中,是可以嵌套多个页面的.(比较常见的问题,就是iframe页面中,经常会出现内容显示不全的时候). 谨记,通过j ...
- 微信小程序web-view页面安卓下显示空白的解决办法!!!
web-view页面在你向地址拼接参数展示页面时,在安卓上有时会显示空白 解决方案: A: 普通不需要参数的话可以直接把地址写在src里,不要去在onLoad里获取你的全局变量后再赋值. B: 如果需 ...
- EasyUI 解决Js动态加载页面样式不显示问题
var strHtml = "<input name='mydate' class='easyui-datebox'>"; 直接使用append把内容加载到页面中,Ea ...
- 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 每天一个JS 小demo之日历制作。主要知识点：日期函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用
@charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...
- 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- Vue.js小demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 每天一个JS 小demo之“随机”抽奖。主要知识点：Math函数，数组方法，递归
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
随机推荐
- maven配置全局私服地址和阿里云仓库
直接上配置代码 <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apa ...
- DataGear 制作支持表单交互和多图表联动的数据可视化看板
对于数据可视化,有时需要根据用户输入的查询条件展示限定范围的数据图表,DataGear的看板表单功能可以快速方便地实现此类需求. 下面的看板示例,包含一个柱状图.一个饼图和一个地图,用户可以通过看板表 ...
- 【Azure Cloud Services】云服务频繁发生服务器崩溃的排查方案
问题描述 云服务(Cloud Services)在使用期间,频繁发生崩溃事件,在崩溃期间,查看CPU负载为100%,而且同时伴随以下情况: 部署在云服务上的应用无法访问 远程连接云服务实例(RDP)访 ...
- redis分片sharding实现原理
为什么集群? 通常,为了提高网站响应速度,总是把热点数据保存在内存中而不是直接从后端数据库中读取.Redis是一个很好的Cache工具.大型网站应用,热点数据量往往巨大,几十G上百G是很正常的事儿,在 ...
- vue-helper 点击跳转插件 在 methods里面互相调用函数，会产生两个函数definitions ，然后就回弹出框让你选择，解决方案是加配置
vue-helper 点击跳转插件 在 methods里面互相调用函数,会产生两个函数definitions ,然后就回弹出框让你选择 原因:换了台电脑,又从新配置下vscode "edit ...
- leetcode数据库sql之Delete Duplicate Emails
leetcode原文引用: Write a SQL query to delete all duplicate email entries in a table named Person, keepi ...
- 记录--JS 的垃圾回收机制
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 垃圾回收(Garbage Collection)是一种内存管理机制,用于检测和清理不再被程序使用的内存,这些不再被使用的内存就被称为 ...
- Java12版本特性【一文了解】
「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...
- ArrayList扩容代码分析
ArrayList扩容机制是在面试中频繁出现的问题,平时了解的比较含糊,特此记录! 注意:每次发生扩容,其容量扩充为原来的1.5倍左右 add方法 public boolean add(E e) { ...
- JDBC访问KingbaseES数据库异常 -- 案例分析
应用使用jdbc访问KingbaseES数据库发生异常:SocketTimeoutException Read timed out 一.异常现象: 应用显示ERROR信息: Caused By: ja ...