利用iframe嵌入頁面，實現父子頁面互動
阿新 • • 發佈：2018-12-12
父頁面程式碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> <title>父頁面</title> <script type="text/javascript"> var projectVar = 'nihai'; $(function(){ $("#submit").click(function(){ //先獲取子頁面的物件 var contIframe = document.getElementById("contIframe").contentWindow; //獲取子頁面的js變數或者物件 var testId = contIframe.testId; //修改子頁面變數 contIframe.testId = “XXX”； //獲取子頁面html中的元素 var sonName = contIframe.$("sonName").val(); //修改子頁面的元素值 contIframe.$("sonName").val(“xiaowang”); //呼叫子頁面的方法 contIframe.sonMethod(); //以下程式碼自定義 }); $("#close").click(function(){ var index=parent.layer.getFrameIndex(window.name); parent.layer.close(index); }); }) //父頁頁面方法 function parentMethod(){ alert(“這是父頁面”); } </script> </head> <body> <div class="submenu"> <input type="hidden" name="parentName" id="parentName" value="老王"> <div style="width: 98%;height:230px;margin:10px auto;border: 1px solid #cccccc;" id='iframeCont' class='iframeCont'> <div align="center" style="height: 100%;"> <iframe style="overflow:auto;" width='100%' height='100%' id="contIframe" src="url" frameborder="none" scrolling="auto" ></iframe> </div> </div> <div class="submit_group"> <a href="javascript:;" class="submit" id="submit">確定</a> <a href="javascript:;" class="cancel" id="close">取消</a> </div> </div> </body> </html>
子頁面程式碼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> <title>父頁面</title> <script type="text/javascript"> var testId = “111”; $(function(){ $("#submit").click(function(){ //獲取父頁面的js變數或者物件 var parentVar = parent.parentVar; //修改父頁面的js變數或物件 parent.parentVar = “你好”; //獲取父頁面的html元素值 var parentName = parent.$("#parentName").val(); //修改父頁面的元素值 parent.$("#parentName").val(“老王”); //以下程式碼自定義 }); $("#close").click(function(){ var index=parent.layer.getFrameIndex(window.name); parent.layer.close(index); }); }) //子頁面方法 function sonMethod(){ alert(“這是子頁面”); } </script> </head> <body> <div class="submenu"> <input type="hidden" name="sonName" id="sonName" value="xiaoli"> <div class="submit_group"> <a href="javascript:;" class="submit" id="submit">確定</a> <a href="javascript:;" class="cancel" id="close">取消</a> </div> </div> </body> </html>
總結：
- 1、如何在父頁面嵌入一個子頁面
（1）先在父頁面寫一個iframe，iframe的src屬性裡面寫所要嵌入頁面的url地址
<iframe style="overflow:auto;" width='100%' height='100%' id="contIframe" src="https://blog.csdn.net/juligang320" frameborder="none" scrolling="auto" ></iframe>
（2）如果沒有初始化src，那麼可以通過js設定：
var div = document.getElementById("contIframe"); div.src = "https://blog.csdn.net/juligang320";
- 2、如何從父頁面獲取和操作子頁面元素
//先獲取子頁面的物件
var contIframe = document.getElementById("contIframe").contentWindow;
//獲取子頁面的js變數或者物件
var testId = contIframe.testId;
//修改子頁面變數
contIframe.testId = “XXX”；
//獲取子頁面html中的元素
var sonName = contIframe.$("sonName").val();
//修改子頁面的元素值
contIframe.$("sonName").val(“xiaowang”);
//呼叫子頁面的方法
contIframe.sonMethod();
- 3、如何從子頁面獲取和操作父頁面元素
//獲取父頁面的js變數或者物件
var parentVar = parent.parentVar;
//修改父頁面的js變數或物件
parent.parentVar = “你好”;
//獲取父頁面的html元素值
var parentName = parent.$("#parentName").val();
//修改父頁面的元素值
parent.$("#parentName").val(“老王”);
說明：這種父子頁面之間的操作，也適合父頁面彈出子頁面式的父子頁面關係