JS操作iframe里的dom,js iframe

  直接赋值如下代码测试即可明白:
  1.html:
  
  
  
  
  无标题文档
  
  
  ====================注意:测试从这里开始=========================
  用来测试子窗体iframeA访问父窗体的某元素
  ====================iframe分割线=========================
  
  
  ====================iframe分割线=========================
  先来演示:父窗体访问子窗体中的某方法或元素
  总结:父窗体访问子窗体的方法跟元素采用不同的方式
  
  
  
  //子窗口访问父窗口方法
  function testP(ss){
  alert(ss)
  }
  //取得iframe的元素
  function getIframe(id){
  return document.getElementById(id).contentWindow.document ;
  }
  //父窗口访问子窗口元素
  function frameDiv(){
  getIframe("frameA").getElementById("ooxx").style.b ackgroundColor="#f00"
  //window.frames["iframeA"].getElementById("ooxx"). style.backgroundColor="#f00" //不能通过这种形式访问某元素
  }
  //父窗口访问子窗口方法
  function frameFun(){
  //getIframe("frameB").getsFun();//不能通过这种形式访问子窗体某方法
  // window.frames["iframeB"].getsFun();
  alert(window.frames["iframeB"].getsFun());
  }
  
  
  
  a.html
  
  
  
  
  无标题文档
  
  
  用来测试父窗体访问子窗体中的某元素
  用来测试子窗口B访问窗体A的某元素
  1.子窗口iframeA访问父窗口的某元素
  
  
  
  //子窗口访问父窗口的某元素
  function frameToPdiv(){
  parent.document.getElementById("pox").style.color= "#fff";
  parent.document.getElementById("pox").style.backgr oundColor="#f0a0f0"
  }
  //子窗口访问父窗口方法
  function frameToPfun(ss){
  parent.testP("ssss");
  }
  //用于测试iframeB访问的方法
  function testBA(){
  alert("用于测试iframeB访问的方法")
  }
  
  
  
  b.html
  
  
  
  
  无标题文档
  
  
  二:测试子窗体间相互访问某方法或元素
  
  
  
  //子窗体B访问子窗体A的某元素
  function frameTframeDiv(){
  //parent.document.getElementById("frameA").content Window.document.getElementById("divooxx").style.col or="#a0c0f0";
  //parent.document.getElementById("frameA").content Window.document.getElementById("divooxx").style.bac kgroundColor="#000"
  var _bframe=parent.getIframe("frameA");//子窗体访问父窗体方法
  _bframe.getElementById("divooxx").style.color="#a0 c0f0";
  _bframe.getElementById("divooxx").style.background Color="#000";
  }
  //子窗体B访问子窗体A的某方法
  function frameTframeFun(){
  window.parent.frames["frameA"].testBA();
  }
  
  
  function getsFun(){
  return "sssssss";
  }
  //getFun()
  
  
  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值