JS防止网页被嵌入iframe框架的方法分析

本文实例讲述了JS防止网页被嵌入iframe框架的方法。分享给大家供大家参考，具体如下：

例如：

<script type="text/javascript">
  if (window!=top) // 判断当前的window对象是否是top对象
  top.location.href = window.location.href; // 如果不是，将top对象的网址自动导向被嵌入网页的网址
</script>

这段代码是有效的。但是，有一个问题：使用后，任何人都无法再把你的网页嵌入框架了，包括你自己在内。

于是，我今天就在考虑，有没有一种方法，使得我的网页只能被嵌入我自己的框架，而不是别人的框架？

表面上看，这个问题很简单。只要做一个判断：当前框架和顶层框架的域名是否相同，如果答案是否，就做了一个URL重定向。

if (top.location.hostname != window.location.hostname) {
  top.location.href = window.location.href;
}

但是，出乎意料的是，这样写是错误的，根本无法运行。你能看出，错在哪里吗？

假定 top.location.hostname 是 www.111.com，而 window.location.hostname 是 www.222.com。也就是说，111.com把222.com嵌入了它的网页中。这时，比较 top.location.hostname != window.location.hostname 会有什么结果？

浏览器会提示代码出错！

因为它们跨域（cross-domain）了，浏览器的安全政策不允许222.com的网页操作111.com的网页，反之亦然。IE把这种错误叫做"没有权限"。进一步说，浏览器甚至不允许你查看top.location.hostname，跨域情况下，一看到这个对象，就直接报错。

那么，代码应该如何修改？

事实上，这提示我们，只要查看top.location.hostname是否报错就可以了。如果报错了，表明存在跨域，就对top对象进行URL重导向；如果不报错，表明不存在跨域（或者未使用框架），就不采取操作。

try{
  top.location.hostname;
}catch(e){
  top.location.href = window.location.href;
}

这样写已经正确了，在IE和Firefox中可以正确运行。但是，Chrome浏览器会出现错误，不知为何，在跨域情况下，Chrome对top.location.hostname不报错！

没办法，只能为了Chrome，再加一段补充代码。

try{
  top.location.hostname;
  if (top.location.hostname != window.location.hostname) {
    top.location.href =window.location.href;
  }
}catch(e){
  top.location.href = window.location.href;
}

好了，升级版代码完成。除了本地域名以外，其他域名一律无法将你的网页嵌入框架。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作iframe技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • js防止页面被iframe调用的方法

    本文实例讲述了js防止页面被iframe调用的方法.分享给大家供大家参考.具体实现方法如下: 一.问题描述: 有时候我们发会现自己的网站页面被别人调用并且一模一样,这个其实就是简单的iframe调用了,下面我来给大家介绍js防止页面iframe调用的方法总结吧,有需要的朋友可参考 二.解决方法: 防止自己的网页被人框架: top.location.href 最上层的地址 windows.location.href自己的地址 self指代当前窗口对象,属于window最上层的对象; locatio

  • js实现防止被iframe的方法

    本文实例讲述了js实现防止被iframe的方法.分享给大家供大家参考.具体如下: 方法一: <script> // Break out of an iframe, if someone shoves your site // into one of those silly top-bar URL shortener things. // // Passing `this` and re-aliasing as `window` ensures // that the window object

  • JavaScript实现防止网页被嵌入Frame框架的代码分享

    最近,国内开始流行另一种流氓行为:使用框架(Frame),将你的网页嵌入它的网页中. 比如,有一家网站号称自己是"口碑聚合门户",提供全国各个网上论坛的精华内容.但是,其实它就是用框架抓取他人的网页,然后在上面加上自己的广告和站标,这同盗版书商有何不同?! 防止方法,在 复制代码 代码如下: </body> 之前加入这段代码: 复制代码 代码如下: <script type="text/javascript">  if ( top.locat

  • javascript 获取iframe里页面中元素值的方法

    IE方法:document.frames['myFrame'].document.getElementById('test').value; 火狐方法:document.getElementById('myFrame').contentWindow.document.getElementById('test').value; IE.火狐方法: 复制代码 代码如下: function getValue(){ var tmp = ''; if(document.frames){ tmp += 'ie

  • js实现网页防止被iframe框架嵌套及几种location.href的区别

    首先我们了解一下:window.location.href.location.href.self.location.href.parent.location.href.top.location.href他们的区别与联系,简单的说:几种location.href的区别 js实现网页被iframe框架功能 "window.location.href"."location.href"."self.location.href"是本页面跳转 "p

  • 嵌入式iframe子页面与父页面js通信的方法

    本文实例讲述了嵌入式iframe子页面与父页面js通信的方法.分享给大家供大家参考.具体分析如下: iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信. 一.同域下父子页面的通信 父页面 parent.html: 复制代码 代码如下: <html> <head> <script type="text/javascr

  • javascript iframe内的函数调用实现方法

    sxmsxm.html 复制代码 代码如下: <script> function sonfun() { alert('ok'); } </script> main.html 复制代码 代码如下: <iframe id="sxm" src="sxmsxm.html" width='100' height='100'></iframe> 在main.html中执行 sxmsxm.html中的sonfun() 有两种方式 1

  • JS防止网页被嵌入iframe框架的方法分析

    本文实例讲述了JS防止网页被嵌入iframe框架的方法.分享给大家供大家参考,具体如下: 例如: <script type="text/javascript"> if (window!=top) // 判断当前的window对象是否是top对象 top.location.href = window.location.href; // 如果不是,将top对象的网址自动导向被嵌入网页的网址 </script> 这段代码是有效的.但是,有一个问题:使用后,任何人都无法

  • js控制网页背景音乐播放与停止的方法

    本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • js实现网页随机切换背景图片的方法

    本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB

  • JS实现网页滚动条感应鼠标变色的方法

    本文实例讲述了JS实现网页滚动条感应鼠标变色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现网页滚动条感应鼠标变色</title> </head> <body> 把你的目光转向右侧的滚动条看一下吧?是不是很漂亮噢?鼠标放上还会变换色彩呢? <br><br><hr> 收集于互联网,只为兴趣与学习交流,不作商业用途.</p&

  • Js实现网页键盘控制翻页的方法

    本文实例讲述了Js实现网页键盘控制翻页的方法.分享给大家供大家参考.具体实现方法如下: 键盘控制翻页效果我想我们不少见了,经常在很多网站特别是相册的效果都可以直接使用键盘进行上下页进行翻页了,原理很简单,只要利用js监测用户是否有按上下键即可实现. 举例如下: 复制代码 代码如下: <a id="last" href="<?=$lefturl?>">上一章</a> <a id="booklist" hre

  • JS运动特效之任意值添加运动的方法分析

    JS运动特效之任意值添加运动的方法分析

    本文实例讲述了JS运动特效之任意值添加运动的方法.分享给大家供大家参考,具体如下: 回顾一下上个例子JS实现多物体运动的方法: <script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 给每个li都添加一个timer liTags[i].onmouseov

  • js实现视图和数据双向绑定的方法分析

    js实现视图和数据双向绑定的方法分析

    本文实例讲述了js实现视图和数据双向绑定的方法.分享给大家供大家参考,具体如下: 前言 视图和数据绑定,使视图和逻辑层分离,使视图层变为数据驱动是前端的一大进步.由此诞生了mvvm类的前端框架,大大提升了开发的效率. 那么在使用旧有的项目中,如何使用更加先进的设计模式来替换掉大量的面向过程编程. 各大框架对于数据绑定的实现都有各自的方式,这里不做深入只是简单介绍一下. Vue使用了es5  Object.defineProperty的特性来实现对数据读取和设置的监听,是一种元编程的方式.个人感觉

  • js中匿名函数的创建与调用方法分析

    本文实例分析了js中匿名函数的创建与调用方法.分享给大家供大家参考.具体实现方法如下: 匿名函数就是没有名字的函数了,也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数.最经常用作回调函数(callback)参数的值,很多新手朋友对于匿名函数不了解.这里就来分析一下. function 函数名(参数列表){函数体;} 如果是创建匿名函数,那就应该是: function(){函数体;} 因为是匿名函数,所以一般也不会有参数传给他. 为什么要创建匿名函数呢?在什么情况下会使用到匿

  • IE iframe的onload方法分析小结

    判断iframe是否加载完成的完美方法IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册. 第二种方法比第一种方法更完美(采用readystatechange判断),因为 readystatechange 事件相对于 load 事件有一些潜在的问题. 这里感觉说的并不是完全准确,开始给我造成了很大的困扰.看其代码才明白,真正意义上来讲IE在创建一个新的iframe时的onload方法需要使用attachEvent来绑定,而原来就存在的ifra

随机推荐