今天没事来总结一下iframe在jquery中怎么操作的，下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法，各位朋友可参考。

jquery方法:

在iframe子页面获取父页面元素

代码如下:

 $('#objId', parent.document);

在父页面 获取iframe子页面的元素
代码如下:

 $("#objid",document.frames('iframename').document)

 $(document.getElementById('iframeId').contentWindow.document.body).html()

显示iframe中body元素的内容。

 $("#testId", document.frames("iframename").document).html();

根据iframename取得其中ID为"testId"元素。

$(window.frames["iframeName"].document).find("#testId").html()

在父窗口中操作 选中IFRAME中的所有输入框：

$(window.frames["iframeSon"].document).find(":text");

在IFRAME中操作 选中父窗口中的所有输入框：

$(window.parent.document).find(":text");

iframe框架的HTML：

<iframe src="test.html" id="iframeSon" width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>

在父窗口中操作 选中IFRAME中的所有单选钮。

$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

在IFRAME中操作 选中父窗口中的所有单选钮。

$(window.parent.document).find("input[@type='radio']").attr("checked","true");

iframe框架的：

<iframe src="test.html" id="iframe1″ width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>

假设有两个页面,在相同域下.

index.html 文件内含有一个iframe:

XML/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=gb2312" />

<title>页面首页</title>

</head> 

<body>

<iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>

</body>

</html>

iframe.html 内容:

XML/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=gb2312" />

<title>iframe.html</title>

</head> 

<body>

<div id="test">www.</div>

</body>

</html>

iframe自适应高度：

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

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

})

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

iframe代码，注意要写ID

<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

jquery代码１：

//注意：下面的代码是放在test.html调用

$(window.parent.document).find("#main").load(function(){

var main = $(window.parent.document).find("#main");

var thisheight = $(document).height()+30;

main.height(thisheight);

});

jquery代码２：

//注意：下面的代码是放在和iframe同一个页面调用

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

var mainheight = $(this).contents().find("body").height()+30;

$(this).height(mainheight);

});

【转】jquery iframe取得元素与自适应高度的更多相关文章

  1. jquery iframe取得元素与自适应高度

    总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery方法: 在 ...

  2. iframe 完全跨域自适应高度

    1.跨域访问页面, 需要访问后台的页面,通过后台调转 2.跨域自适应宽高   思路:通过相互嵌套,获取跨域页面的高度,通过src传回到本域,通过parent方法设置主页的iframe的高度 index ...

  3. 如何通过jQuery获取一个没有定高度的元素---------的自适应高度(offsetHeight的正确使用方法)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. iframe框根据内容自适应高度

    1.页面 <iframe name="iframe_userCenter" id="iframe" frameborder=2 width=100% he ...

  5. jquery如何获取元素的滚动高度

    获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(documen ...

  6. jquery iframe高度自适应

    $(document).ready(function () { $("#test").load(function () { var thisheight = $(this).con ...

  7. jquery iframe自适应高度[转]

      经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试. 很古老的方法: <iframe src="../In ...

  8. jQuery实现iframe的自适应高度

    假设我们在当前页面要嵌套一个iframe 1 <iframe id="myframe" src="test.html" height="240& ...

  9. jquery 清空 iframe 的内容，，iframe自适应高度

    $(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...

随机推荐

  1. 记一次小团队Git实践(中)

    对于初学者,从使用上先入手,往往学的最快,并从中汲取教训,再回头更深入的学习,效果尤佳. 安装git 安装git自不必说,mac已经内置了git,linux下一个命令就能搞定,windows下需要下载 ...

  2. 学习笔记总结---关于sass

    今天跟大家共同分享交流一下关于sass的知识点: sass的产生: css不是一种编程语言,我们可以用它开发网页样式,但不能用它进行编程.它没有常量,变量,也没有条件语句,只是对属性一行行的描述,资料 ...

  3. BZOJ 2648 SJY摆棋子 ——KD-Tree

    [题目分析] KD-Tree第一题,其实大概就是搜索剪枝的思想,在随机数据下可以表现的非常好NlogN,但是特殊数据下会达到N^2. 精髓就在于估价函数get以及按照不同维度顺序划分的思想. [代码] ...

  4. PHP 自带查询运行内存的函数

    memory_get_usage - 返回分配给 PHP 的内存量 int memory_get_usage ([ bool $real_usage = false ] ) 返回当前分配给你的 PHP ...

  5. EBay .Net SDK Api 实践

        1.请求流程介绍   提供SOA地址:https://api.ebay.com/wsapi   WSDL生成的代码在WebService.cs文件当中.   ApiCall封装了所有的RPC, ...

  6. 【原】iOS学习之第三方-AFNetworking1.3.0

    将 CocoaPods 安装后,按照 CocoaPods 的使用说明就可以将 AFNetworking 第三方集成到工程中,具体请看上篇博客iOS学习46之第三方CocoaPods的安装和使用(通用方 ...

  7. BZOJ2965 : 保护古迹

    首先要将这个图连通,方法是通过扫描线+set求出每个连通块最高的点上方的第一条边,然后向交点连边. 然后把边拆成两条双向边,每次找到一条没走过的边,找到极角排序后它的反向边的后继,直到回到这条边. 根 ...

  8. POJ 1681 (开关问题+高斯消元法)

    题目链接: http://poj.org/problem?id=1681 题目大意:一堆格子,或白或黄.每次可以把一个改变一个格子颜色,其上下左右四个格子颜色也改变.问最后使格子全部变黄,最少需要改变 ...

  9. Android 热补丁和热修复

    参考: 各大热补丁方案分析和比较 Android App 线上热修复方案 1. Xposed Github地址:https://github.com/rovo89/Xposed 项目描述:Xposed ...

  10. Android Acitivity 生命周期

    Activity的生命周期: (1)启动Activity:系统会先调用onCreate方法,然后调用onStart方法,最后调用onResume,Activity进入运行状态. (2)当前Activi ...