jquery iframe取得元素与自适应高度
总结一下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元素的内容。
代码如下 | 复制代码 |
|
根据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:
代码如下 | 复制代码 |
|
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"> |
iframe.html 内容:
XML/HTML代码
代码如下 | 复制代码 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> iframe自适 |
应高度
代码很简单:
代码如下 | 复制代码 |
$("#iPersonalInfo").load(function() { $(this).height($(this).contents().height()); }) |
有一点需要注意的,我也在调试的时候才发现的,耽误了不少时间。就是绑定事件必须在iframe加载完毕之前绑定,否则不会执行。
以下是jQuery,load事件的概述
在每一个匹配元素的load事件中绑定一个处理函数。
如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。
iframe代码,注意要写ID
代码如下 | 复制代码 |
|
jquery代码1:
代码如下 | 复制代码 |
//注意:下面的代码是放在test.html调用 |
jquery代码2:
代码如下 | 复制代码 |
//注意:下面的代码是放在和iframe同一个页面调用 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器