总结一下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. JSOI2012 玄武密码 和 HDU2222 Keywords Search

    玄武密码 给若干模式串和一个文本串.求每个模式串在文本串上能匹配的最大前缀长度. N<=10^7,M<=10^5,每一段文字的长度<=100. jklover的题解 将模式串建成一个 ...

  2. unittest----assert断言的使用

    unittest的官发文档链接:https://docs.python.org/2.7/library/unittest.html#unittest.TestCase 先介绍下unittest的基本使 ...

  3. celery timeout的拦截

    0X01 场景 celery任务超时报错,想查看是传入哪一类数据运行时导致的超时(哪一个插件),但是该报错难以拦截. [2019-06-30 17:23:21,070: ERROR/MainProce ...

  4. Mac卸载Python

    推荐使用 Homebrew 来安装第三方工具 自己安装的python散落在电脑各处,删除起来比较麻烦 今天在此记录一下删除的过程(以Python3.6为例) 删除Python 3.6 framewor ...

  5. 批量清理harbor镜像

    #! /bin/bash # 通过Harbor提供的API来批量删除镜像,人工删除费时费力 # 经过测试发现,通过接口去删除时提供的是的标签,但实际上删除的时候通过的是镜像的IMAGE_ID,也就是说 ...

  6. SIGAI机器学习第一集 机器学习简介

    讲授机器学习的基本概念.发展历史与典型应用 大纲: 人工智能简介机器学习简介为什么需要机器学习机器学习的发展历史机器学习的典型应用人工智能主要的公司本课程讲授的算法 机器学习并不是人工智能一上来就采用 ...

  7. [AGC028B]Removing Blocks 概率与期望

    考虑算每一个位置在所有情况的期望值乘以全排列似乎就是答案. 那么对于 $i$,如果要由 $j$ 来贡献的话就要满足 $j$ 在 $i....j-1$ 之前先拿. 而在拿 $j$ 时,先于 $i...j ...

  8. docker笔记--容器之间如何互相免密？

    在使用docker搭建hadoop分布式集群的时候,需要各容器之间相互免密登录,传统的方式我想或许会很麻烦,特别是当容器达到几百上千台的时候,这时就需要有一种方式来更简单实现免密登录了. 环境介绍: ...

  9. NOIP1999提高组 题解报告

    T1 导弹拦截 题目大意:依次有\(n\) (\(n \le 10^5\))枚导弹,一套导弹拦截系统只能拦截一系列高度递减的导弹(一套系统拦截的弹道不一定相邻).求一套系统最多能拦截多少导弹,以及最少 ...

  10. Spring框架各模块功能介绍

    一. Spring是什么? Spring由Rod johnson开发: 是一个非常活跃的开源框架: 它帮助分离项目组件(对象)之间的依赖关系: 它的主要目的是简化企业开发 二. Spring的核心概念 ...