How JS and jquery take values across frameworks

This project adopts a template of and framework, so the front-end development must understand the value of cross framework.

For example, it is divided into three frameworks: top left and right, where top is the parent framework.

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

I need to dynamically add a modal box from top to right, so I have to use the append method or JavaScript splicing string appendChild method across frames. Here is an example:

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'>Retrieve password</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' >Account number</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'>Bind mailbox</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'>Determine</button>"
                +"</div>"
            +"</div>"
         +"</div>"
     +"</div>";
    topdiv.innerHTML = ihtml;
    window.top.frames['rightFrame'].document.body.appendChild(topdiv);

It may be noted that this is the built-in modal box for dynamically generating bootstrap, so the css and js of bootstrap must be referenced (note that it is in top). But the modal box doesn't appear. I don't think the. modal() method is added. At this time, it should be noted that since the modal box is in the rightFrame, the modal box label in the rightFrame must be taken across the frame before the modal box can appear in the top.
The following jQuery can also be written

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

Tags: Javascript JQuery

Posted on Sun, 22 Mar 2020 11:11:53 -0400 by jwadenpfuhl