关于JS和jquery如何跨框架取值的问题
程序员文章站
2022-06-20 10:49:57
...
这次毕设项目采用了和框架的一个模板,前端开发就必须要了解跨框架取值的问题。
比如这就分成了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'>×</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)