关于JS和jquery如何跨框架取值的问题

这次毕设项目采用了和框架的一个模板，前端开发就必须要了解跨框架取值的问题。

比如这就分成了top》left和right三个框架，其中top是父框架。

<frameset rows="88,*" cols="*" frameborder="no" border="0" framespacing="0" >
  <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame"  />
  <frameset cols="187,*" frameborder="no" border="0" framespacing="0">

    <frame src="teacher.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame"  /><div class="btn-group" style=" clear:both;margin-top:10px;float:right; margin-right:12px;position:relative;z-index: 1">

    <frame src="index.html" name="rightFrame" id="rightFrame" title="rightFrame" style="z-index: -1" />

  </frameset>
</frameset>

我需要从top 动态添加一个模态框到right，就必须跨框架采用append方法，或者JavaScript拼接字符串appendChild方法，下面给出示例：

var topdiv=window.top.frames['rightFrame'].document.createElement('div');
    var ihtml= "<div class='modal fade' style='left:10%;top:30%' id='editPwdm' tabindex='-1' role='dialog' aria-labelledby='mySmallModalLabel' aria-hidden='true'>"
        +"<div class='modal-dialog'>"
            +"<div class='modal-content' style='width:70%;'>"
                +"<div class='modal-header'>"
                    +"<button type='button' class='close' data-dismiss='modal'>"+"<span aria-hidden='true'>&times;</span>"+"<span class='sr-only'>Close</span>"+"</button>"
                    +"<h4 class='modal-title'>找回密码</h4>"
                +"</div>"
                +"<div class='modal-body' style='margin-left: 5px;'>"
                    +"<form class='form-horizontal'  method='get' role='form' >"
                       +"<div class='form-group' style='font-size: 15px'>"
                            +"<p class='col-md-4' >账号</p>"
                            +"<input type='text' placeholder='' class='col-md-7' id='forget-teacherId' name='former' >"

                        +"</div>"

                        +"<div class='form-group' style='font-size: 15px'>"
                            +"<p class='col-md-4'>绑定邮箱</p>"
                            +"<input type='text' class='col-md-7'  id='forget-email' name='newpwd'>"
                        +"</div>"
                       +"</form>"
                         +"</div>"



                +"<div class='modal-footer'>"

                  +  "<button type='button'  class='btn btn-primary'  id='forget-sure' data-dismiss='modal'>确定</button>"
                +"</div>"
            +"</div>"
         +"</div>"
     +"</div>";
    topdiv.innerHTML = ihtml;
    window.top.frames['rightFrame'].document.body.appendChild(topdiv);

可能注意到，这是动态生成bootstrap内置的模态框，那么bootstrap的css和js肯定要引用（注意是在top里）。但是模态框并没有出现，我认为是没有加.modal()方法。这时候要注意，由于模态框是在rightFrame里的，所以必须跨框架取到rightFrame里的模态框标签，才可以在top里让模态框出现。
下面这种jQuery的写法也是可以的

setTimeout(function()
   {
      $(window.parent.frames["rightFrame"].document).find("#editPwdm").modal('show');
    alert(1);
   },1000)