欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-20 10:49:57
...

这次毕设项目采用了和框架的一个模板,前端开发就必须要了解跨框架取值的问题。
关于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)
相关标签: