`
lai88
  • 浏览: 3048 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

← js封装一个tab效果页面无刷新ajax上传文件–模拟iframe,超简单 →JQuery IFrame框架高度自适应(支持嵌套–兼容IE,ff,safaf

阅读更多
在网上找了很多的iframe自适应高度的脚本,对浏览的的兼容性都不好。所以就想利用jquery强大的兼容性,写一个iframe自适应高度的脚本。

jquery很强大,代码很简单:

$("#iPersonalInfo").load(function() {

$(this).height($(this).contents().height());

})

有一点需要注意的,我也在调试的时候才发现的,耽误了不少时间。就是绑定事件必须在iframe加载完毕之前绑定,否则不会执行。
以下是jQuery,load事件的概述
在每一个匹配元素的load事件中绑定一个处理函数。
如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。



另外一种方法实现自适应iframe高度自适应

function adjustIFramesHeightOnLoad(iframe) {

var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);

$(iframe).height(iframeHeight);
}
分享到:
评论

相关推荐

    jquery----TextArea高度自适应

    在探讨“jQuery——TextArea高度自适应”的主题时,我们深入解析了如何利用jQuery库实现文本区域(TextArea)的高度自动调整,以确保其高度能够根据输入的文本量动态变化,从而提供更好的用户体验。以下是对该主题的...

    Asp.net Ajax+JQuery 无刷新文件上传

    "Asp.net Ajax+JQuery 无刷新文件上传"的实现主要是通过利用异步传输(Ajax)更新页面部分区域,而无需整个页面刷新,同时结合jQuery的便利性,可以实现更为流畅的用户交互。 首先,我们需要理解Ajax的基本原理。...

    javascript原生和jquery库实现iframe自适应高度和宽度.doc

    在网页开发中,若需要iframe(内联框架)元素随着内容的变化自动调整其大小,可采用JavaScript原生方法或借助jQuery库来实现。使用JavaScript原生方式通常涉及到对iframe元素的高度和宽度属性的实时控制,以适应内容...

    iframe 自适应高度

    2. **访问子框架文档**:由于`iframe`是一个独立的文档,我们需要访问其内部的文档对象模型(DOM),以便读取内部内容的高度。 ```javascript var subWeb = document.frames ? document.frames["iframe1"]....

    嵌入到HTML的iframe自动适应大小

    在探讨“嵌入到HTML的iframe自动适应大小”的主题时,我们主要关注的是如何使一个内嵌在HTML页面中的iframe元素能够根据其内容或者父容器的尺寸动态调整自身的高度,从而实现良好的响应式设计和用户体验。...

    Ajax + JQuery 实现无刷新效果

    本篇文章将深入探讨如何结合Ajax和jQuery来实现无刷新效果。 首先,Ajax的核心在于创建异步通信,允许后台与服务器进行数据交换而不必重新加载整个页面。这主要依赖于浏览器的XMLHttpRequest对象,但直接操作这个...

    用Jquery里面封装的Ajax方法实现无页面刷新效果

    标题中的“用Jquery里面封装的Ajax方法实现无页面刷新效果”意味着我们将讨论如何使用 jQuery 的 AJAX 功能来实现实时更新内容,避免用户感知到页面刷新。jQuery 的 AJAX 方法简化了原生 JavaScript 的 AJAX 编程,...

    struts2+jquery+ajax文件异步上传

    在这个项目中,jQuery被用来封装Ajax调用,使得文件上传可以在后台进行,无需刷新整个页面。通过使用`$.ajax()`或`$.fileUpload()`方法,我们可以创建一个异步请求,将文件数据发送到服务器。 Ajax(Asynchronous ...

    jQuery文字大小自适应屏幕_调整浏览器屏幕文字大小自适应效果

    jQuery是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。 **jQuery的基本概念** jQuery是一个轻量级的JavaScript库,它的目标是“Write Less, Do More”。通过提供易于...

    艾恩Ajax无刷新文件上传

    许多前端框架和库,如jQuery、Vue.js、React.js,都有对应的插件或组件支持无刷新文件上传,例如jQuery的`jquery.form.js`插件、Vue.js的`vue-file-upload`组件等,它们封装了以上提到的复杂逻辑,简化了开发流程。...

    ajax+jquery+ashx实现上传文件

    在Web开发中,异步传输(Ajax)技术允许我们...通过这种组合使用Ajax、jQuery和ASHX的方式,我们可以创建一个高效且用户体验良好的文件上传系统,无需离开当前页面即可完成文件上传,从而提高了Web应用的交互性和效率。

    jQuery自适应页面手机端抽奖

    "jQuery自适应页面手机端抽奖"是一个典型的话题,它涉及到如何使用jQuery这个强大的JavaScript库来实现一个在手机端也能流畅运行、自适应屏幕大小的抽奖程序。以下将详细讲解这个主题中的关键知识点。 首先,jQuery...

    jquery实现ajax上传文件asp.net版

    在ASP.NET环境中,使用jQuery和Ajax来实现文件上传是一种常见的技术方案,它可以提供无刷新的用户体验,提升网站的交互性。下面将详细讲解这个过程涉及的关键知识点。 首先,我们需要了解jQuery库。jQuery是一个轻...

    jsp无刷新上传文件

    在文件上传场景中,由于JavaScript的安全限制无法直接操作文件,iframe可以作为一个中介,将文件提交到服务器而不刷新整个页面。 2. **AJAX(异步JavaScript和XML)**:AJAX是一种在不重新加载整个网页的情况下,...

    ajax无刷新上传图片

    在现代Web应用中,"Ajax无刷新上传图片"是一个常见的需求,它允许用户在不刷新整个页面的情况下上传图片,提供更好的用户体验。这个功能通常通过结合使用JavaScript库jQuery和特定的Ajax上传插件来实现,例如这里...

    iframe框架使用(完美版)

    描述中的“封装js”可能是指将上述处理iframe自适应高度的逻辑封装成一个JavaScript函数,便于在项目中重复使用。这样的函数可能如下所示: ```javascript function setIFrameHeight(iframeId) { var iframe = ...

    拖拽一个iframe中的div 在另一个iframe页面中显示

    标题 "拖拽一个iframe中的div 在另一个iframe页面中显示" 描述了在Web开发中一个交互性的技术,涉及跨框架(iframe)通信和DOM操作。这个技术主要应用于创建富交互的用户界面,允许用户在不同的iframe之间传递和操作...

    jquery ajax框架

    jQuery AJAX框架是JavaScript库jQuery中的一个核心特性,它极大地简化了网页与服务器之间的异步数据交互。AJAX,即Asynchronous JavaScript and XML,允许在不刷新整个页面的情况下更新部分网页内容,提升了用户体验...

    jquery+ajax实现文件上传的js

    在Web开发中,jQuery与AJAX的结合使用广泛地用于创建动态、无刷新的用户体验,尤其是在文件上传场景中。本文将深入探讨如何利用jQuery和AJAX实现文件上传,并重点介绍`ajaxfileupload.js`这个jQuery插件。 首先,...

    jquery+ajax文件上传

    首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。而AJAX(Asynchronous JavaScript and XML)则是一种创建动态网页的技术,允许在不刷新整个页面的情况下与服务器交换数据...

Global site tag (gtag.js) - Google Analytics