`
hawkist
  • 浏览: 35874 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

thikbox之iframe方式和ajax方式区别

阅读更多
最近这个项目引入了thickbox弹出框架,用safari浏览器测试页面,弹出层不能引用到js文件,慢慢查找才发现是thickbox弹出方式引起的。
一、为了方便,我们写了一个公共js:
function checkPopup(ev, title, url, width, height) {
	ev.preventDefault();
	if(url.indexOf("?") == -1){
		url += "?";
	}
	url += "&random=" + (new Date().getTime());
        //以iframe方式弹出层
        //url += "&random=" + (new Date().getTime()) + "&&TB_iframe=true";
        //tb_show(title, url, false);
	$.ajax({
		url: url, 
		async: false,
		success: function(data, status, xhr) {
			if (data.indexOf("loginWrap") == -1) {
				TB_WIDTH = width * 1 || 630;
				TB_HEIGHT = height * 1 || 440;
				tb_show(title, '', false);
				$("#TB_ajaxContent").html(data);
			}
			else {
				location.href= "";
			}
		}
	});
}

二、区别:
    iframe 方式,弹出层作为新的页面显示,浏览器读取新页面上导入的js文件,但是后续操作都在弹出层上,比如添加用户弹出层,添加完毕后,我们希望回到用户列表主层,这种方式会将主层显示在弹出层内。
    ajax方式,弹出层作为主层的一部分,部分浏览器-safari,无法读取弹出层自己引用的js文件,可以将这部分文件在主层引入,需要注意的是,弹出层的js不要写$(document).ready,因为在页面ready后,弹出层还没有出现,所以写在ready里面的函数对于弹出层依然无效,对弹出层而言,全部用onClick事件触发函数。
分享到:
评论

相关推荐

    使用jQuery和ajax代替iframe的方法(详解)

    此外,通过这种方式,还能够更好地控制内容加载的时机和方式,提升用户体验。例如,可以实现页面无刷新的内容更新,提供更加流畅的交互体验。 在实际应用中,还可以根据具体需求,对上述基本方法进行扩展和优化。...

    Iframe模拟Jquery.Ajax

    这种方式通常称为IFrame跨域通信或IFrame模拟Ajax。 以下是一些关键知识点: 1. **Ajax基础**:理解Ajax的基本原理,包括XMLHttpRequest对象的使用,发送HTTP请求,处理响应,以及如何在页面上动态更新内容。...

    关于Ajax与iframe及target的问题

    在Web开发中,Ajax(Asynchronous JavaScript and XML)和iframe是两种常见的技术,它们各自有其独特的用途,但在某些场景下也可能相互结合使用。本文将深入探讨Ajax与iframe的交互,以及如何利用它们来实现特定的...

    jquery插件:ajax和iframe加载提示效果1.1版

    3,当iframe以tab标签的方式显示时,由于tab标签切换执行也需要一段时间,造成的获取的iframe的高和宽不是最终的高和宽 4,其他细微调整。 草草增加了一个例子。和新版本打包在一起。 遗留问题: 1,不支持多个...

    使用隐藏的Iframe实现ajax无刷新上传

    使用隐藏的Iframe实现Ajax无刷新上传的基本思路是:创建一个隐藏的Iframe作为文件上传的目标,当用户选择文件并提交表单后,表单数据会通过POST方式发送到服务器端处理文件上传操作。由于Iframe的存在,上传过程不会...

    ajax iframe上传.

    以下是使用AJAX和iframe实现文件上传的基本步骤: 1. **创建隐藏的iframe**:在HTML页面中创建一个隐藏的iframe元素,设置其`name`属性,例如`iframeUploader`。这个iframe将成为文件提交的目标。 ```html <iframe...

    iframe ajax前端框架

    **标题解析:** "iframe ajax前端框架" 指的是一种在前端开发中结合了`iframe`和`AJAX`技术的框架。`iframe`(Inline Frame)是HTML中的一个元素,可以用来在一个网页中嵌入另一个网页,常用于实现页面部分刷新或...

    ajax iframe jsp 无刷新上传文件.zip

    总结,"ajax iframe jsp 无刷新上传文件.zip"包含的知识点涵盖了Ajax与Iframe结合的文件上传技术,JSP服务器端处理,JavaScript字符串操作,Struts2的验证和链接标签,以及Spring入门和JSP请求Action的方法。...

    基于iframe实现ajax跨域请求 获取网页中ajax数据

    其实问题的关键就在于,浏览器在解析ajax请求地址时会和当前网页的地址进行比较,如果是跨域的,那就禁止掉并且报错。那么我们如果让浏览器解析出的ajax地址和当前网页的解析地址一样,浏览器不就不会禁止我们的请求...

    ajax_XML_iframe无刷新异步读取 源代码

    标题中的"ajax_XML_iframe无刷新异步读取 源代码"指的是使用Ajax技术和XML以及IFrame实现的无刷新异步数据读取技术。在Web开发中,这种技术能够提高用户体验,因为用户无需等待整个页面刷新即可获取或更新数据。 ...

    看到一个js 的ajax的upload用iframe实现

    通过这种方式,我们利用IFrame实现了跨浏览器的AJAX文件上传,即使在不支持FormData和XMLHttpRequest Level 2的浏览器中也能正常工作。这种方法的一个优点是它可以处理大文件上传,因为文件是直接由浏览器提交的,而...

    ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传

    总的来说,这个项目展示了如何利用CKEditor的API和JavaScript,结合AJAX和Iframe技术,实现一个简单的图片上传功能。通过理解这些关键点,开发者可以进一步定制自己的富文本编辑器,以满足特定项目的需求。

    jquery插件:ajax和iframe加载提示效果

    **jQuery 插件:Ajax 和 Iframe 加载提示效果** 在网页开发中,用户体验是至关重要的,尤其是在进行异步操作(如Ajax请求)或加载Iframe时,用户往往需要一个明确的反馈,告知他们系统正在进行后台处理。这个jQuery...

    解决ASP.NET AJAX在frame及iframe中跨域访问的问题

    1、为ScriptManager添加脚本引用,不从ScriptResource.axd中加载MicrosoftAjax.js脚本,而是直接加载 <asp:ScriptReference Name="MicrosoftAjax.js" ScriptMode="auto" Path="~/ScriptLibrary/System.Web....

    bootstarp+iframe 实现局部刷新 后台模板

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式布局和移动设备优先的Web项目。在本主题中,“bootstrap+iframe 实现局部刷新 后台模板”指的是利用Bootstrap框架和HTML5的`<iframe>`元素来创建一个...

    Ajax,jqgrid,标签页Iframe进销存代码

    在IT行业中,Ajax、jqGrid、标签页Iframe和进销存系统是常见的技术与应用。下面将详细解析这些知识点。 1. **Ajax(异步JavaScript和XML)**: Ajax是一种网页开发技术,允许在不刷新整个页面的情况下,与服务器...

    完美解决iframe跨域问题

    1. **使用`window.postMessage`**:这是一种现代浏览器支持的跨域通信方式,通过向`window`对象发送消息,可以在不同源的iframe之间传递数据。发送端使用`postMessage(data, targetOrigin)`,接收端监听`message`...

    iframe跨域常用问题和iframe页面自适应

    1. **宽度和高度设置**:确保`iframe`元素的`width`和`height`属性设置正确。可以设置为百分比,使其相对于包含它的容器自适应,如: ```html <iframe src=...

Global site tag (gtag.js) - Google Analytics