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

jquery方法:

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

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

在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>

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

 代码如下 复制代码

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

2.在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);
});
 

jqueryiframe取得

 

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. Linux下安装nginx实现伪分布

    1.安装 Nginx 的编译环境 gcc yum install gcc-c++ 2.nginx 的 http 模块使用 pcre 解析正则表达式,所以安装 perl 兼容的正则表达式库 yum in ...

  2. 44、[源码]-Spring容器创建-BeanFactory预准备

    44.[源码]-Spring容器创建-BeanFactory预准备 @Override public void refresh() throws BeansException, IllegalStat ...

  3. js中特殊的宏任务

    一.setImmediate 目前只有IE10+和NodeJS支持该API. 立即触发回调函数,使其进入宏任务队列(macro task queue) 语法: // 只有一个参数 setImmedia ...

  4. 16 | “order by”是怎么工作的？

    在你开发应用的时候,一定会经常碰到需要根据指定的字段排序来显示结果的需求.还是以我们前面举例用过的市民表为例,假设你要查询城市是“杭州”的所有人名字,并且按照姓名排序返回前1000个人的姓名.年龄. ...

  5. mongodb存储引擎WiredTiger

      MongoDB3.2后默认采用WiredTiger存储引擎. 组成 WiredTiger由三部分组成: Mongos: 负责查询请求的路由和对ShardServer的管理: ConfigServe ...

  6. learning scala How To Create Implicit Function

    println("Step 1: How to create a wrapper String class which will extend the String type") ...

  7. CRNN网络结构详解

    目录 一. CRNN概论 简介 网络 二. CRNN局部之特征提取 三. CRNN局部之BLSTM 四. CRNN局部之CTC 关于CTC是什么东西? CTC理论基础 五. 参考文献 一. CRNN概 ...

  8. yy

    sudo rm -rf /var/cache/apt/archives/python-catkin-pkg-modules_0.4.12-1_all.deb sudo rm -rf /var/cach ...

  9. 鲁班学院java架构vip课程

    1.wps文档地址 https://docs.qq.com/doc/DRVNLUndvTmFSdEhO 2.百度网盘地址 https://pan.baidu.com/s/1uxaTzJZHKrsw_H ...

  10. 在 Arch 上Yaourt 使用这些替代品

    1. aurman aurman 是最好的 AUR 助手之一,也能胜任 Yaourt 替代品的地位.它有非常类似于 pacman 的语法,可以支持所有的 pacman 操作.你可以搜索 AUR.解决包 ...