文档章节

js如何在iframe父页面和子页面中操作dom

码上有春天
 码上有春天
发布于 2015/04/28 11:55
字数 238
阅读 87
收藏 0

jquery操作包含iframe的页面中元素的几种方法:

//
//在iframe子页面获取父页面元素
$('#objId', parent.document);
$(window.parent.document).find("#objId");

//在父页面获取iframe子页面的元素
$("#objid",document.frames('iframename').document);
$("#objid",window.frames["iframeName"].document);
$("#objid",document.getElementById('iframeId').contentWindow.document);
$(window.frames["iframeName"].document).find("#objid");
$("#iframeId").contents().find("#objid");

//例子
//显示iframe中body元素的内容
$(document.getElementById('iframeId').contentWindow.document.body).html();
//例子
//显示iframe中id为testId的元素的内容
$("#testId", document.frames("iframename").document).html();
$(window.frames["iframeName"].document).find("#testId").html()
//例子
//在父窗口中操作,选中IFRAME中的所有单选钮
$(window.frames["iframeName"].document).find("input:radio").attr("checked","true");
//在IFRAME子窗口中操作,选中父窗口中的所有单选钮
$(window.parent.document).find("input:radio").attr("checked","true");

//再进一步
//父窗口想获得IFrame中的Iframe,就再加一个frames子级就行了
$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio")

注意:由于安全问题,协议规定框架内的页面是不能跨域的!

© 著作权归作者所有

码上有春天
粉丝 5
博文 82
码字总数 55985
作品 0
广州
程序员
私信 提问
jQuery控制IFRAME父窗口元素

DOM方法: 父窗口操作IFRAME:window.frames["iframeSon"].document IFRAME操作父窗口: window.parent.document jquery方法: 在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["i......

疯狂的艺术家
2011/04/01
8K
1
iframe多层嵌套时获取元素总结

父页面获取子页面元素: 注意:onload事件 jQuery获取: $("iframe").contents().find("holder")......; (嵌套三层,或者更多时) $('iframe').contents().find('iframe').contents().find(......

sjzmlb
2015/06/30
4.4K
0
使用iframe解决Javascript跨域问题

在今年的baidu salon分享会上黄方荣主讲的《WEB数据交互的艺术》中提到一个非常优雅绝妙的解决方案!话不多说,直接上解决方案原理图: 该图要解决的问题说明如下: 在AAA.com域名下的index...

黄平俊
2010/08/13
5.9K
3
iframe展示特定html代码

业务场景是, 从服务端以字符串的形式取回 一个页面的整个html代码,在当前页面上展示, 当然就想到了iframe iframe要事先存在与dom树中 而不是用createElement方法增加 整个替换标签,而不只...

孟飞阳
06/10
18
0
iframe子页面调用父页面javascript函数的方法(支持chrome和IE的通用方法)

iframe子页面调用父页面javascript函数的方法 今天遇到一个iframe子页面调用父页面js函数的需求,解决起来很简单,但是在chrome浏览器遇到一点小问题。顺便写一下iframe的父页面调用子页面j...

卖火柴的format
2014/08/11
3.4K
1

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部