如何向iframe中添加div

如何向iframe中添加div,第1张

//不需戚洞要修改frame的src//但必须保证frame的页面是同域高陪枯的,跨域的话乱基获取document会报错$("#iframe的id").contents().find("#要加div的元素的id").append("动态div")

<1>js或者jQuery访问页面中的框架iframe.

注意:框架内的页面是不能跨域的! 假设有两个页陵巧面,在相同域下.

假设:父窗口 index.html ,有id 为 subifrm 的iframe

1. 在index.html执行JS直接访问子窗口中某元素:

document.getElementById('subifrm').contentWindow.document.getElementById('test').style.color='red'

2. 利用jquery 来访问子窗口

$("#subifrm").contents().find("#test").css('color','red')

====================================================================

====================================================================

<2>用DOM方法与jquery方法结合的方式实现互动 *** 作

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")

====================================================================

====================================================================

<3>使用jquery *** 作iframe

1 页面里有两个ifame

<iframe id="leftiframe"><友汪如/iframe>

<iframe id="mainiframe></iframe>

<iframe id="leftiframe"></iframe>

<iframe id="mainiframe></iframe>

leftiframe中jQuery改变mainiframe的src代码:

1

$("#mainframe",parent.document.body).attr("src","")

2、 如果内容里面有一个ID为mainiframe的ifame

<iframe id="mainifame"></ifame>

<iframe id="好启mainifame"></ifame>

ifame包含一个someID

<div id="someID">you want to get this content</div>

<div id="someID">you want to get this content</div>

得到someID的内容

$("#mainiframe").contents().find("someID").html()或者$("#mainiframe").contains().find("someID").text()

$("#mainiframe").contents().find("someID").html()或者$("#mainiframe").contains().find("someID").text()

$("#mainiframe").contents().find("someID").html()或者$("#mainiframe").contains().find("someID").text()

2 、如上面所示

leftiframe中的jQuery *** 作mainiframe的内容someID的内容

$("#mainframe",parent.document.body).contents().find("someID").html()或者$("#mainframe",parent.document.body).contents().find("someID").val()

source:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11988082.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存