同一页面的不同Iframe获取数据

公共父页面(主页面):

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'test.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </head>
  
  <body>
        <input id="test"/>
        <iframe id="iframe1" src="a.jsp"></iframe>
        <iframe id="iframe2" src="b.jsp"></iframe>
  </body>
</html>

a页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'a.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  </head>
  
  <body>
        a页面
        
        <script type="text/javascript">
            $(function(){
                var x = window.parent.document.getElementById("iframe2");  
                var right = (x.contentWindow || x.contentDocument);  
                if(right.document){  
                    right = right.document;  
                }
                alert(right.getElementById("testId").value);
            })
        </script>
  </body>
</html>

b页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'b.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  </head>
  
  <body>
        b页面
        <input id="testId" type="text" value="我是b页面啊"/>
        
        <script type="text/javascript">
            $(function(){
                var testVal = $("#testId").val();
                window.parent.document.getElementById("test").value = testVal;
            })
        </script>
  </body>
</html>

效果图:

1、页面刚加载时(a页面获取到b页面文本框内的值):

2、页面加载完毕后(将b页面文本框的值赋值给父页面)

原文地址:https://www.cnblogs.com/henuyuxiang/p/7426875.html