`
xiahyoha
  • 浏览: 6898 次
  • 性别: Icon_minigender_2
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

iframe 刷新onload 监听(兼容浏览器)

阅读更多

对 iframe onload事件的监听,本来是用来动态改变iframe的背景色的,结果没用到。

 

function showIframe(url){
		var type=getOs();
		var contentIframe=document.getElementById('auditRuleManagerIframe');
		//先隐藏
		contentIframe.style.display="none";
		contentIframe.src=url;
		if(type=="ie"){								
			//ie中需要对readyState进行监听
			if(contentIframe.readyState){ 
				contentIframe.style.display="block";
			}			   			
		}else{		
			//加载完成后再展示
			contentIframe.onload=function(){ 
				contentIframe.style.display="block";
			};
		}
	}

	//获得浏览器类型
	function getOs()
	{
			if(navigator.userAgent.indexOf("MSIE")!=-1) { 
			return "ie"; 
		} 
			if(navigator.userAgent.indexOf("Firefox")>0){ 
		return "Firefox"; 
	} 
			if(navigator.userAgent.indexOf("Safari")>0) { 
	    return 'Safari';
	}  
			if(navigator.userAgent.indexOf("Camino")>0){ 				
	    return "Camino"; 
	} 
			if(navigator.userAgent.indexOf("Gecko/")>0){ 				   			
	    return "Gecko"; 
	} 
	}
 
分享到:
评论

相关推荐

    iframe实现异步无刷新提交

    在网页开发中,异步无刷新...总的来说,`iframe`实现的异步无刷新提交是一种实用的技巧,尤其适用于那些需要兼容老版本浏览器或处理跨域问题的场景。通过熟练掌握这一技术,开发者可以构建更加流畅、高效的Web应用。

    iframe自适应高度和宽度

    在上面的例子中,使用了`onload`事件来监听`iframe`内容加载完成,然后通过`document.all['myframe']`获取到`iframe`元素,并通过`myframe.document.body.scrollHeight`获取内部文档的实际高度,最后将这个高度设置...

    二个iframe之间传值 的小例子

    - `main.html`作为主页面,可能包含用于管理`iframe`间通信的代码,例如初始化`iframe`,设置`onload`事件监听,以及处理`iframe`间的`postMessage`通信。 总结,通过以上方式,我们可以实现在多个`iframe`之间灵活...

    ajax iframe上传.

    然而,需要注意的是,由于涉及到iframe,这种上传方式可能受到浏览器兼容性问题的影响,需要对不同版本的浏览器进行适配。此外,现代Web技术如HTML5的FormData和Fetch API已经提供了更优雅的文件上传解决方案,但在...

    jsp无刷新上传文件

    - 客户端通过监听XMLHttpRequest对象的`onreadystatechange`或`onload`事件,获取服务器的响应结果,通常是一个确认信息或错误信息。 - 如果使用iframe,那么响应会自动显示在iframe中,而不会影响主页面的显示。 ...

    js实现iframe动态调整高度的代码

    最后,为了使`SetWinHeight`函数能够正确工作,我们需要在`iframe`标签中添加`onload`事件监听器,这样当`iframe`的内容加载完成后,函数会被自动调用。同时,`id`属性应与函数中使用的`obj`参数相匹配,以便于函数...

    jS checkbox 多选

    4. 父页面接收并处理消息:在父页面中,注册`message`事件监听器来接收iframe发送的消息,并根据接收到的选项更新本地存储或显示状态。 ```javascript window.addEventListener('message', function(event) { if ...

    JS异步文件上传(兼容IE8+)

    在前端,你可以监听iFrame的`onload`事件来判断文件是否已经成功上传。因为iFrame加载完成后,响应会被加载到其中,我们可以读取iFrame的`contentDocument`或`contentWindow.document`来获取响应内容。以下是一个...

    ajax upload

    同时,考虑到浏览器兼容性,需要检测XMLHttpRequest和File API的支持情况,对不支持的浏览器提供备选方案,如使用iframe实现的非Ajax上传。 **5. 示例代码** 以下是一个简单的Ajax上传示例: ```javascript var ...

    IE9 elementUI文件上传的问题解决

    提交后,监听iframe的onload事件,以获取上传后的回调。 其次,在处理文件上传后的返回数据时,也会面临一个问题。如果服务器返回的数据类型为application/json,IE浏览器会尝试解析这个JSON数据,并将其作为文件...

    JavaScript实现图片伪异步上传过程解析

    - 由于表单提交的结果会在`<iframe>`中呈现,我们可以监听`<iframe>`的`onload`事件,当服务器响应并加载完成后,从`<iframe>`的内容中提取图片URL。 - 通常,服务器会将图片的URL以某种形式(如HTML文本)返回,...

    JavaScript中三种异步上传文件方式

    - 主页面通过监听iframe的`onload`事件,获取服务器返回的数据,调用预先定义好的回调函数,如`uploadFinished`,从而更新用户界面。 以下是一个简单的示例代码: ```html <!DOCTYPE html> 隐藏的iframe上传...

    PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

    当服务端处理完成并返回数据后,通过监听iframe的onload事件调用绑定的方法,从而获取服务器返回的数据。 该插件的语法参数为: ```javascript $.ajaxFileUpload({ url: '', // 服务端处理上传的脚本路径 type: '...

Global site tag (gtag.js) - Google Analytics