一個頁面中iframe之間的值的傳遞
阿新 • • 發佈：2019-01-02
test.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head></head> <body> <iframe id="frame1" name="frame1" src=""></iframe> <iframe id="frame2" name="frame2" src=""></iframe> <button type="button" id="a">a</button> <button type="button" id="b">b</button> </body> </html>
a.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="ibox"> <div class="ibox-form"> <form class="form-horizontal" id="CLD" name="CLD"> <div class="row"> <div class="col-xs-8"> <label class="control-label col-xs-4" name="a" id="a">a</label> <div class="col-xs-8"> <input class="form-control" name="aa" id="aa" value="asdsa"> </div> </div> </div> </form> </div> </div> </div> </body> </html>
b.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="ibox"> <div class="ibox-form"> <form class="form-horizontal" id="CLD"> <div class="row"> <div class="col-xs-8"> <label class="control-label col-xs-4" name="b" >b</label> <div class="col-xs-8"> <input class="form-control" name="bb" id="bb" value="asdsa"> </div> </div> </div> </form> </div> </div> </div> </body> </html>
test.js
$(function(){
$("#frame1").attr("src","./a.jsp");
setLister();
})
function setLister(){
$("#a").on("click",function(){
alert(frame1.aa.value);
alert($("#frame1")[0].contentWindow.aa.value);//主頁面去frame1中的屬性
alert($("#frame1").contents().find("#aa").val());//主頁面去frame1中的屬性
$("#frame2").attr("src","./b.jsp");
});
$("#b").on("click",function(){
alert(window.frames['frame1'].document.getElementById("aa").value);//主頁面去frame1中的屬性
alert(window.frames['frame2'].document.getElementById("bb").value);//主頁面中取frame2中的屬性
});
}
b.js
$(function(){
alert(parent.window.frames['frame1'].document.getElementById('aa').value);
});