`

js操作frame进行消息提示

阅读更多

如题index.html

top.html:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript">
	var mainFrame;//frame
	var mainDoc;//doc
	var msgDivHtml = '<div id="msgDiv">消息提示</div>';//html
	var msgDiv;//div
	var height;//高度
	var opacity;//透明度
	var l;
	var s;
	var h;
	var t;
	var isShow = true;//是否每隔一段时间就显示一次
	var autoHideSecond=5;//自动隐藏时间,5秒
	
	window.onload = function(){
		t = window.setInterval('setDateTime()',1000);
		mainFrame = self.parent.frames['mainFrame'];
		loadMsg();
	};
	
	function setDateTime(){
		var today  =  new  Date();
		var h  =  today.getHours();
		var m  =  today.getMinutes();	
		var s  =  today.getSeconds();
		document.getElementById('dateTime').innerHTML = h+':'+m+':'+s;
	}
	
	function updateMsgDiv(){
		mainDoc = mainFrame.document;
		msgDiv = mainDoc.getElementById('msgDiv');		
	}
	
	//向后台获取信息
	function loadMsg(){
		//clear
		window.clearTimeout(s);
		window.clearTimeout(h);
		
		var topCount = 4;//假设向后台获取到消息条数了
		updateMsgDiv();
		var body = mainDoc.body;
		if(!msgDiv){
			$(body).append(msgDivHtml);
			updateMsgDiv();
		}
		//加载html片段完成
		//添加计时器弹出效果
		//还原透明度
		msgDiv.style.height = 1+'px';
		setAlpha(msgDiv,100);
		//还原高度
		showMsg();
		l = window.setTimeout('loadMsg()',10000);	
	}
	
	//显示div
	function showMsg(){
		updateMsgDiv();
		if(!msgDiv)return;
		height = window.parseInt(msgDiv.offsetHeight);
		if(height<=120){
			msgDiv.style.height = (height+4)+'px';
			s = window.setTimeout('showMsg()',20);
		}else{
			window.clearTimeout(s);
			//10秒后关闭
			opacity = 100;
			h = window.setTimeout('hideMsg()',autoHideSecond*1000);
		}
	}
	
	//设置透明度
	function setAlpha(div,v){
		if(!div)return;
		if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
        	div.style.opacity = v/100;	
    	}else if(navigator.userAgent.indexOf("MSIE")>0) {
        	div.style.filter = 'Alpha(Opacity='+v+')';
    	}
	}
	
	//隐藏div
	function hideMsg(){
		updateMsgDiv();
		if(opacity>=2){
			opacity = opacity-2;
			setAlpha(msgDiv,opacity);
			h = window.setTimeout('hideMsg()',20);
		}else{
			window.clearTimeout(h);
		}
	}
	
	//设置显示状态
	function setShowState(){
		if(isShow){
			isShow = false;
			window.clearTimeout(l);
		}else{
			isShow = true;
			loadMsg();
		}
	}
	
</script>
</head>

<body>
top.html
<br/>时间:<span id="dateTime"></span><br/>
开启消息提示:<input type="checkbox" onclick="setShowState();" checked="checked"/>
<button onclick="loadMsg();">load</button>
</body>
</html>

 

分享到:
评论

相关推荐

    IE 插件 Chrome Frame 1.2.183.7

    安装过程通常涉及下载安装文件(如本例中的"IE 插件 Chrome Frame 1.2.183.7.exe"),然后按照提示进行操作。需要注意的是,用户必须具有管理员权限才能成功安装。 **开发者考虑** 对于Web开发者,启用Chrome ...

    javascript页面代码防止frame禁止右键

    如果希望仅支持启用了 JavaScript 的浏览器,可以使用 noscript 标签来提示用户启用 JavaScript。 ```html 您需要启用 JavaScript 才能查看完整内容。 ``` #### 8. 查看页面源代码 有时为了让用户直接查看页面...

    jQuery控制frames及frame页面JS的方法

    在jQuery中,我们可以利用其强大的选择器和API来方便地操作frame内的元素。 在提供的代码示例中,主要展示了如何通过jQuery来检查frame页面的状态并触发相应的行为。代码中定义了一个名为`CheckUser`的函数,该函数...

    Window-Server-Frame.rar_js camera _框架 服务

    标题中的"Window-Server-Frame.rar"提示我们这是一个与Windows服务器相关的框架,可能是用于构建Windows服务的代码库。"js camera _框架 服务"这部分描述可能意味着该框架包含JavaScript(js)实现的摄像头功能,...

    Chrome Frame

    Chrome Frame的安装过程相对简单,只需下载名为ChromeFrameSetup.exe的安装程序,然后按照提示进行操作即可。需要注意的是,用户必须在安装前开启IE的ActiveX控件选项,因为Chrome Frame是通过ActiveX技术来实现的。...

    javascript常用操作技巧

    ### JavaScript 常用操作技巧详解 在前端开发领域,JavaScript 是一门不可或缺的语言,它能够帮助开发者实现多种功能,从而提升用户体验。本文将基于提供的文件信息,深入解析一系列JavaScript常用操作技巧及其应用...

    springboot集成websocket实现消息的主动推送

    3. 创建消息处理器,处理客户端发送的消息,并进行相应操作。 4. 客户端使用Stomp.js和SockJS.js库与WebSocket服务器交互,订阅主题并发送消息。 通过这种方式,你可以轻松地在Spring Boot应用中实现实时消息推送,...

    Atom-atom-aframe,原子A.zip

    3. **验证和提示**:检查代码中的A-Frame语法错误,提供实时提示。 4. **预览和VR模拟**:在编辑器内预览A-Frame场景,甚至可能有内置的VR模式模拟。 5. **调试工具**:针对A-Frame的调试工具,帮助开发者查找和修复...

    javascript完全学习手册1 源码

    6.4.4 对属性进行操作 146 第3篇 JavaScript高级编程篇 第7章 正则表达式 151 7.1 正则表达式及其作用 151 7.2 正则表达式参考语法 152 7.2.1 限定符 154 7.2.2 选择匹配符 157 7.2.3 分组组合和反向引用符 158 ...

    activemq+js

    标题 "activemq+js" 暗示我们即将探讨的是如何在JavaScript环境中使用ActiveMQ,这是一个开源的消息代理和队列服务器,广泛应用于Java平台,但也可以通过多种方式与JavaScript进行交互。ActiveMQ允许应用程序之间...

    MSN消息提示类

    描述部分提及该消息提示类是“纯js编写”,这意味着它完全使用JavaScript编程语言实现,不依赖于任何其他脚本语言。JavaScript是一种广泛用于网页开发的脚本语言,通过它可以创建交互式网页和Web应用。 该提示类...

    x-frame-bypass:绕过X帧选项

    点击劫持是一种恶意技术,攻击者通过将目标网站嵌入到一个透明或半透明的IFrame中,使用户在不知情的情况下进行操作,从而达到操纵用户行为的目的。`X-Frame-Options`头部的设置可以限制网页被其他站点以IFrame的...

    JS实现刷新父页面不弹出提示框的方法

    需要注意的是,如果是在同一页面中的frameA跳转到frameB,并不使用`window.opener`或`window.parent`,而是直接操作frame对象。例如,如果frameA中有一个函数需要在frameB中被调用,那么可以直接通过frameB的名称...

    javascript完全学习手册2 源码

    6.4.4 对属性进行操作 第3篇 JavaScript高级编程篇 第7章 正则表达式 7.1 正则表达式及其作用 7.2 正则表达式参考语法 7.2.1 限定符 7.2.2 选择匹配符 7.2.3 分组组合和反向引用符 7.2.4 特殊字符 ...

    js_弹出窗口_iframe

    它通常包含一个提示消息和一个可编辑的文本字段。例如: ```javascript var userInput = prompt('请输入你的名字'); console.log(userInput); ``` 3. `confirm()`函数:显示一个带有消息和“确定”与“取消”两...

    轻轻松松学用javascript编程(PDF)

    配图列表 列表 1 说明 1.1 主要的内容 1.2 学习目标 2 了解JavaScript 浏览器上的程序语言 2.1 JavaScript 操作对象的简单介绍-- 属性和方法 2.2 JavaScript 代码的加入 2.2.1 加入...

    flv流媒体播放器

    FLV文件是通过使用H.263或H.264编码的视频流,配合AAC或MP3音频流进行封装的。这种封装方式使得FLV文件能够快速加载并在网络上传输,即使在网络带宽有限的情况下也能实现流畅播放。 FLV流媒体播放器的工作原理主要...

    纯js弹出层layer跨Iframe完美回调

    然而,由于同源策略的限制,不同源的Iframe之间无法直接进行JavaScript通信。Layer插件通过巧妙的设计,突破了这一限制,实现了跨Iframe的回调功能,这意味着在一个Iframe中的操作可以影响到另一个Iframe或主页面,...

Global site tag (gtag.js) - Google Analytics