iframe里的页面禁止右键事件的方法
这篇文章主要介绍了iframe里的页面禁止右键事件的方法,需要的朋友可以参考下
在子页面中加入：
document.oncontextmenu = function(){
return false
Copyright (C) , All Rights Reserved.
版权所有 闽ICP备号
processed in 0.040 (s). 13 q(s)没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
在当前的页面里内嵌了一个iframe，这个页面有一个返回功能，点击返回的时候发现iframe里的内容变化了，当前的页面并没有返回，查看了iframe里面的源码发现里面写了:
var listenerBackHandler = {
isRun: false, //防止微信返回立即执行popstate事件
listenerBack: function () {
var state = {
title: "title",
window.history.pushState(state, "title", "#");
window.addEventListener("popstate", function (e) {
if (listenerBackHandler.param.isRun) {
window.location.href = setting.nextL
}, false);
//初始化返回事件
initBack: function () {
window.addEventListener('pageshow', function () {
listenerBackHandler.param.isRun =
setTimeout(function () { listenerBackHandler.param.isRun = }, 1000); //延迟1秒 防止微信返回立即执行popstate事件
listenerBackHandler.listenerBack();
listenerBackHandler.initBack();
网上也查了一些方法：例如h5的新特性sandbox等限制，这里是需要运行他的js脚本，所以用不了；例如重写iframe里的window对象，没有效果。。例如移除他的事件监听，还是没有效果。。。
求解决方法.. 感谢！
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。当前位置:&&
本页文章导读:
&&&&?ie浏览器中取得iframe中内容的方法&&&&&&ie浏览器中取得iframe中内容的方法，正在研究js操作iframe的朋友，不妨看一下了，相信对您会有所帮助的。
ie浏览器下:
var doc=document.getElementById("frame1").contentWindow.
alert(x.ge.........&&&&?js实现禁用只读文本框获得焦点时的退格键&&&&&&只读文本框有个缺陷，当鼠标焦点在文本框里面时，按回退键(backSpace)，会退回到前一个页面，多么纠结的一个问题啊。
这样的话，用户又不清楚可不可以输入了，如果用户看到文本框想去.........&&&&?js判断浏览器版本等相关信息&&&&&&js判断浏览器版本等。
var JS_ver = [];
(Number.prototype.toFixed)?JS_ver.push("1.5"):
([].indexOf && [].forEach)?JS_ver.push("1.6"):
((function(){try {[a,b] = [0,1];}catch(ex) {.........
[1]ie浏览器中取得iframe中内容的方法
&&&&来源:&互联网& 发布时间:&
var doc=document.getElementById("frame1").contentWindow.
alert(x.getElementById('xxx'));
非ie浏览器下(标准script)
var doc=document.getElementById("frame1").contentD
alert(x.getElementById('xxx'));
如果就jquery就可以兼容了
var doc=$("#frame1").contents();
alert(x.find('xxx'));
[2]js实现禁用只读文本框获得焦点时的退格键
&&&&来源:&互联网& 发布时间:&
document.documentElement.onkeydown = function(evt){
var b = !!evt, oEvent = evt || window.
if (oEvent.keyCode == 8) {
var node = b ? oEvent.target : oEvent.srcE
var reg = /^(input|textarea)$/i, regType = /^(text|textarea)$/i;
if (!reg.test(node.nodeName) || !regType.test(node.type) || node.readOnly || node.disabled) {
oEvent.stopPropagation();
oEvent.cancelBubble =
oEvent.keyCode = 0;
oEvent.returnValue =
[3]js判断浏览器版本等相关信息
&&&&来源:&互联网& 发布时间:&
var JS_ver = [];
(Number.prototype.toFixed)?JS_ver.push("1.5"):
([].indexOf && [].forEach)?JS_ver.push("1.6"):
((function(){try {[a,b] = [0,1];}catch(ex) {}})())?JS_ver.push("1.7"):
([].reduce && [].reduceRight && JSON)?JS_ver.push("1.8"):
("".trimLeft)?JS_ver.push("1.8.1"):
JS_ver.supports = function()
if (arguments[0])
return (!!~this.join().indexOf(arguments[0] +",") +",");
return (this[this.length-1]);
alert("Latest Javascript version supported: "+ JS_ver.supports());
alert("Support for version 1.7 : "+ JS_ver.supports("1.7"));
这个脚本，既能通过检测特征来检测JavaScript版本，还能检查特定的Javascript版本所支持的特性。
得到了结果，我们还是看下此系统是如何检测javascript版本的吧，于是将其代码抽取出来（抽取过程相当纠结），得到如下所示代码：
&script type="text/javascript"&
var u = n.userA
var apn = n.appN
var v = n.appV
var ie = v.indexOf('MSIE ')
if(ie & 0){
apv = parseInt(i = v.substring(ie + 5));
if(apv & 3) {
apv = parseFloat(i);
apv = parseFloat(v);
var isie = (apn == 'Microsoft Internet Explorer');
var ismac = (u.indexOf('Mac') &= 0);
var javascriptVersion = "1.0";
if(String && String.prototype){
javascriptVersion = '1.1';
if(javascriptVersion.match){
javascriptVersion = '1.2';
var tm = new D
if(tm.setUTCDate){
javascriptVersion = '1.3';
if(isie && ismac && apv &= 5) javascriptVersion = '1.4';
var pn = 0;
if(pn.toPrecision){
javascriptVersion = '1.5';
if(a.forEach){
javascriptVersion = '1.6';
tcf = new Function('o','var e,i=0;try{i=new Iterator(o)}catch(e){}return i');
i = tcf(o);
if(i && i.next) {
javascriptVersion = '1.7';
alert(javascriptVersion);
原理：根据不同版本的javascript对于一些特定函数的支持不同从而判断其版本所在。
其中仅对1.4版本有一个特殊处理。
您可能感兴趣的文章：
检测浏览器版本的js代码
JS判断浏览器类型的代码
javascript判断浏览器类型与版本的代码
判断浏览器信息的js代码
最新技术文章:
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！
(C)9IT.COM,E-mail:www_169it_com#163.com(请将#改为@)本文并不是一篇iframe API文档讲解，因此想了解iframe API的同学请移步&， 我将在现在浏览器的角度与大家取探讨iframe, 因此，本文中虽然会提及一些iframe在旧浏览器中的应用， 但并不会去讲解。 所以，您对iframe在旧浏览器中的应用场景感兴趣的话，还请自己搜索相关资料。 同时， 我也会从浅入深的来与大家探讨iframe中的一些特性、各种现代浏览器中的渲染模式、应用场景、以及在现代开发中的影响。
什么是iframe
在HTML中有三种结构特征：树结构、层次结构、框结构。iframe正是框结构中的一员。每个iframe中都是一个独立的沙箱，它们拥有自己的window以及DOM。
为什么需要理解它
虽说在日常开发中，我们应尽量少使用iframe，但在一些特殊场景下，我们也是不可避免需要使用iframe。因此，深入理解iframe能够让我们更合理的使用它。
渲染与阻塞
前面讲到iframe是HTML三种结构中的框结构，框结构中还有另外两个元素：frameset和frame，但它们都已废弃，不再推荐使用。&每一个框结构都有一个独立的HTML文档，而不包含以上三种框结构中任意一种的网页就是最简单的框结构。其示图如下：&
对应的，复杂的框结构即多个框结构复合在一个页面中， 其示图如下：&
像上图中的多框结构，非常不适合移动端，因为这种结构的页面多触控操作非常不友好。 到此，对于框结构的基础知识普及便告一段落了， 下面笔者将分别从 Chrome、Firefox、Safari、IE 11的测试结果来分析iframe在不同浏览器中的渲染模式以及阻塞情况，代码如下：&我们先定义iframe要引用的页面，并编写如下代码：
const start = Date.now();
const limit = function() {
return Date.now() -
while(limit() &= 1000 * 5) {}
接下来， 在主页面中引入它：&
&iframe src="./frame-sets.html"&&/iframe&
代码很简单， 就是让iframe 阻塞至少5秒钟，接下来分别在 Chrome、Firefox、Safari、IE11 中测试阻塞情况:
&ChromeFirefoxSafariIE11
阻塞主页面渲染
阻塞主页面onload
从结果来看，阻塞onload并无异议，从来都是如此，但是惊讶的发现在Chrome中并不会阻塞主页面的渲染， 我猜Chrome为iframe创建来一个单独的沙箱进程吧。
无阻塞加载iframe
前面讲了iframe与阻塞，在不同的浏览器中表现大致相同（只有Chrome不会阻塞主页面渲染，onload则都会受到阻塞）。在极大多数情况下，iframe都会阻塞主页面的渲染， 所以我们急需采用一种不阻塞主页面渲染的加载iframe的方式。那如果才能做到无阻塞加载iframe呢？思路有二：1. 直接使用setTimeout异步加载iframe；2. 在页面触发onload之后加载iframe。话不多说， 直接亮代码：
// setTimeout 形式
setTimeout(function() {
frame.src = 'other-page-url';
这种方式十分简洁， 但是需要注意的是， 如果你需要在页面onload后执行某些操作的时候， 需要在 setTimeout 回调中去绑定load函数。
window.addEventListener('load', function() {
iframe.src = 'other-page-url';
这种方式也是简单粗暴，而且没有setTimeout方式灵活， 没办法准确到iframe加载完后， 在主页面做一些操作。
iframe与跨域
&是我们开发过程中经常遇到的问题，而如何解决跨域的问题， 网络上已经有非常多可行的方案， 至于最终选择何种方案去处理， 还得结合实际业务场景选择最合适的方案。接下来，我们将缩小解决方案的范围， 只限定在iframe中去讲解几种跨域方案。&为了模拟跨域， 我们更改本地hosts。 以mac os 为例：&
cd private/etc
添加如下代码：
<span style="color: #7.0.<span style="color: #.1 demo.com
<span style="color: #7.0.<span style="color: #.1 cross.demo.com
<span style="color: #7.0.<span style="color: #.1 other.com
方案一：&document.domain，这是浏览器暴露出来的一个准只读属性（之所以说它是准只读属性，是因为它可以设置为当前域名的超级域），利用这个特性，可以实现主域名相同子域名不同的网页实现通信。代码如下：&main.html(http://demo.com:15100/main.html)
document.domain = 'demo.com';
window.alertFrameMsg = function(msg) {
alert(msg);
const frame = document.querySelector('#myFrame');
frame.src = 'http://cross.demo:15100/frame-sets.html';
frame-sets.html(http://cross.demo:15100/frame-sets.html)
document.domain = 'demo.com';
parent.alertFrameMsg('hello, world!');
如你所见， 只需要将两者的document.domain设置为超域， 就可以实现主页面与iframe的跨域通信了。而且相互之间的访问非常自由(可以双向通信)
方案二：&window.postMessage&，HTML5提供的API，可以安全的启用跨域通信。语法非常简单:targetWindow.postMessage(data, targetOrigin)，第一个参数是要传递的数据，令人高兴的是将要发送到目标window的数据，会采用序列化， 这意味着我们无需自己序列化，即可安全的传输数据对象到目标window。如何在目标窗口接收到数据呢？编写如下代码即可：
window.addEventListener('message', function(evt) {
console.log(evt.data);
}, false);
evt.data&即是&postMessage&中传递过来的数据！ 结合上下文， 综合起来：&main.html(http://demo.com:15100/main.html)
window.frames['myFrame'].contentWindow.postMessage({name: 'injser', age: <span style="background-color: #f5f5f5; color: #}, 'http://other- demo.com:15100');
frame-sets.html(http://other.com:15100/frame-sets.html)
window.addEventListener('message', function(evt) {
console.log(evt.data);
}, false);
阅读(...) 评论()