iframe+js实现页面全屏、淡入淡出切换

快乐向日葵

浏览: 497020 次
性别:
来自: 杭州

最近访客更多访客>>

logcy

dbwfncxz

xiaolan02

masuweng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端开发-javascript

JavaScript Firefox IE Chrome HTML

index.html

<html>
<head>
<script   type="text/javascript">
//实现全屏
function Fkey(){
     var WsShell = new ActiveXObject('WScript.Shell')
     WsShell.SendKeys('{F11}');
}


//判断浏览器类型
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

//被嵌入的页面路径列表
var page_links=new Array("1.html",
                         "2.html",
			             "3.html");
var page_now=0;//表示当前显示的页面

//淡入淡出效果
var opacity=0;
function addOpacity(){
  opacity+=10;
  document.body.style.filter="alpha(opacity="+opacity+")";
  document.body.style.opacity=opacity/100;
  if(opacity<100)setTimeout(function(){addOpacity();},30);
}


//更改iframe中页面，淡入淡出效果
function decOpacity(url){
   opacity=0;
   addOpacity();
   document.getElementById('ifr').src=url;
}

//键盘上按键按下时调用该函数
function jumpPage(e) {

  var keycode_now;
  if (Sys.ie){
      if (event.keyCode==37) {keycode_now = 37;}
      else if (event.keyCode==39) {keycode_now = 39;}
  }
  else if (Sys.firefox){
      var keycode = e.which;
      if (keycode==37) {keycode_now = 37;}
      else if (keycode==39) {keycode_now = 39;}
  }

  if (keycode_now==37) {
	      if(page_now>0){
              page_now = page_now-1;
		  }else{
              page_now = page_links.length-1;
		  }
  }
  else if (keycode_now==39) {
	      if(page_now<page_links.length-1){
              page_now = page_now+1;
		  }else{
              page_now = 0;
		  }
  }

  decOpacity(page_links[page_now]);
}

//键盘上按键在iframe中按下时调用该函数，
function jumpPage_child(keycode_now) {
  if (keycode_now==37) {
	      if(page_now>0){
              page_now = page_now-1;
		  }else{
              page_now = page_links.length-1;
		  }
  }
  else if (keycode_now==39) {
	      if(page_now<page_links.length-1){
              page_now = page_now+1;
		  }else{
              page_now = 0;
		  }
  }
  decOpacity(page_links[page_now]);
}
//键盘上按键按下时调用函数jumpPage
document.onkeydown=jumpPage;
</script>

</head>
<style type="text/css"> body{filter:alpha(opacity=80);-moz-opacity:0.8;border:0px solid red;}</style>

<body onload="javascript:document.all.ifr.height=document.body.clientHeight;"  
	  topmargin="0" 
	  marginwidth="0" 
	  marginheight="0"
	  scroll="no"
	  style="overflow-y:hidden;">

<div style="background:#EEE;
            font-color:#666666;
			font-size:12px;
			width=100%;
			margin:0;
			padding:0;
			cellspacing:0;
			height:26px;
			line-height:26px;
			text-align:center;
			border:0px solid blue;">
<a href="#" onclick="javascript:decOpacity(page_links[0]);">1.html</a>
<a href="#" onclick="javascript:decOpacity(page_links[1]);">2.html</a>
<a href="#" onclick="javascript:decOpacity(page_links[2]);">3.html</a>
</div>

<iframe id="ifr" 
        name="ifr" 
		src="1.html" 
		style="height:100%;width:100%;border:0px solid blue;margin:0;padding:0;"
		frameborder=no>
</iframe>
<script>
Fkey();
addOpacity();
</script>

</body>
</html>

1.html

<html>
<head>
<script   type="text/javascript">
function callParent() {
try{
  var keycode_now;
  if (parent.Sys.ie){
      if (event.keyCode==37) {keycode_now = 37;}
      else if (event.keyCode==39) {keycode_now = 39;}
  }
  else if (parent.Sys.firefox){
      var keycode = e.which;
      if (keycode==37) {keycode_now = 37;}
      else if (keycode==39) {keycode_now = 39;}
  }
   parent.jumpPage_child(keycode_now);
}catch(e){alert(e.message);}
}

document.onkeydown=callParent;

</script>

<body style="background-color:#ddd;font-size:30px;text-align:center;">
this is  1.html
</body>
</html>

2.html

<html>
<head>
<script   type="text/javascript">
function callParent() {
try{
  var keycode_now;
  if (parent.Sys.ie){
      if (event.keyCode==37) {keycode_now = 37;}
      else if (event.keyCode==39) {keycode_now = 39;}
  }
  else if (parent.Sys.firefox){
      var keycode = e.which;
      if (keycode==37) {keycode_now = 37;}
      else if (keycode==39) {keycode_now = 39;}
  }
   parent.jumpPage_child(keycode_now);
}catch(e){alert(e.message);}
}

document.onkeydown=callParent;

</script>

<body style="background-color:#dd2;font-size:30px;text-align:center;">
this is 2.html
</body>
</html>

3.html

<html>
<head>
<script   type="text/javascript">
function callParent() {
try{
  var keycode_now;
  if (parent.Sys.ie){
      if (event.keyCode==37) {keycode_now = 37;}
      else if (event.keyCode==39) {keycode_now = 39;}
  }
  else if (parent.Sys.firefox){
      var keycode = e.which;
      if (keycode==37) {keycode_now = 37;}
      else if (keycode==39) {keycode_now = 39;}
  }
   parent.jumpPage_child(keycode_now);
}catch(e){alert(e.message);}
}

document.onkeydown=callParent;

</script>

<body style="background-color:#dfe;font-size:30px;text-align:center;">
this is 3.html
</body>
</html>

分享到：

屏蔽键盘及鼠标相关代码 | iframe 父窗口和子窗口相互的调用方法集锦

2010-12-26 14:07
浏览 3707
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

iframe+js实现页面全屏、淡入淡出切换

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

iframe+js实现页面全屏、淡入淡出切换

评论

发表评论

相关推荐

回调函数实例

jquery完全遮盖+弹出框

ul li 拖动排序jquery-ui.js

table tr 拖动排序插件jquery.tablednd.js

可移动弹出层

[转]jquery的checked以及disabled

javascript实现图片轮换效果

js动态加载css文本

MathJax+MathML

js中使用正则表达式实现replaceAll方法

js控制onclick事件实例

判断iframe是否加载完毕的方法（兼容ie和Firefox）(转)

颜色搭配器

浮动图片 广告图片 示例

经常会遇到这样一种情况。 在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快，或许我们感觉不到页面载入的不同步，但试想，如果一个需要内嵌到i

iframe载入完成时的事件监听

屏蔽键盘及鼠标相关代码

iframe 父窗口和子窗口相互的调用方法集锦

js判断浏览器类型

如何遍历一个未知的object类型的属性（转）

最近访客更多访客>>

浮动图片广告图片示例

经常会遇到这样一种情况。在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快，或许我们感觉不到页面载入的不同步，但试想，如果一个需要内嵌到i