同一頁面的兩個Iframe，其中一個iframe獲取另一個iframe內的iframe中的元素值

本文轉載自查看原文 2017-08-25 11:25 2240 Jquery、Js相關

公共父頁面（主頁面）：

<%@ 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(){
                setTimeout(function(){
                    var x = window.parent.document.getElementById("iframe2");  
                    var right = (x.contentWindow || x.contentDocument);  
                    if(right.document){  
                        right = right.document;  
                    }
                    alert(right.frames["iframe3"].window.document.getElementById("testId").value);
                },100);
            })
        </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">
    -->
  </head>
  
  <body>
        b頁面
        <input type="text" value="我是b頁面啊"/>
        <iframe id="iframe3" src="c.jsp"></iframe>
  </body>
</html>

c頁面：

<%@ 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 'c.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>
        <input id="testId" value="我是b頁面的子頁面啊"/>
        <script type="text/javascript">
            $(function(){
                var testVal = $("#testId").val();
                window.parent.parent.document.getElementById("test").value = testVal;
            })
        </script>
  </body>
</html>

效果圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue同一頁面中擁有兩個表單時，驗證問題 sql將兩個表關聯將其中一個表中字段的值修改為為另一個值在同一頁面中顯示多個echart圖表在jsp中同一頁面中多個標簽頁之間切換數據展示 js 在iframe子頁面獲取父頁面元素,或在父頁面獲取iframe子頁面的元素的幾種方式 v-model,請求到的list數據分別賦值給兩個變量，v-model改變其中一個變量的值，另一個也隨即改變 iframe框架下子頁面調用另一個子頁面的方法；寶塔面板phpmyadmin管理mysql出現405頁面的其中一個解決辦法錨點鏈接之-----同/不同一頁面跳轉 bootstrap同一頁面上多個模態框