1. 程式人生 > >通過子介面(iframe中的)對父介面(框架介面)的彈框進行控制。

通過子介面(iframe中的)對父介面(框架介面)的彈框進行控制。


用到的知識點:

iframe的呼叫包括以下幾個方面:(呼叫包含html dom,js全域性變數,js方法)

主頁面呼叫iframe;

iframe頁面呼叫主頁面;

主頁面的包含的iframe之間相互呼叫;



主要知識點

1:document.getElementById("ii").contentWindow 得到iframe物件後,就可以通過contentWindow得到iframe包含頁面的window物件,然後就可以正常訪問頁面元素了;

2:$("#ii")[0].contentWindow  如果用jquery選擇器獲得iframe,需要加一個【0】;

3:$("#ii")[0].contentWindow.$("#dd").val() 可以在得到iframe的window物件後接著使用jquery選擇器進行頁面操作;


4:$("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; 可以通過這種方式向iframe頁面傳遞引數,在iframe頁面window.hellobaby就可以獲取到值,hellobaby是自定義的變數;

5:在iframe頁面通過parent可以獲得主頁面的window,接著就可以正常訪問父親頁面的元素了;

6:parent.$("#ii")[0].contentWindow.ff; 同級iframe頁面之間呼叫,需要先得到父親的window,然後呼叫同級的iframe得到window進行操作;




原始碼

原始碼包含內容,主頁面(main.html)中含有兩個iframe子頁面(frame.html,newIframe.html)

主頁面如何呼叫子頁面中的方法;
子頁面如何呼叫主頁面中的方法;
兩個子iframe之間如何如何進行互動
main.html



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>顯示圖表</title>
<script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var gg="dsafdsafdsafdsafsdaf";
    function ggMM() {
        alert("2222222222222222222222222222222");
    }
    function callIframeMethod() {
        //document.getElementById("ii").contentWindow.test();
        $("#ii")[0].contentWindow.test(); //用jquery呼叫需要加一個[0]
    }
    function callIframeField() {
        alert($("#ii")[0].contentWindow.ff);
    }
    function callIframeHtml() {
        alert($("#ii")[0].contentWindow.$("#dd").val());
        //alert($("#ii")[0].contentWindow.document.getElementById("dd").value);
        //alert($("#ii")[0].contentWindow.document.getElementById("dd").value);                
    }    
    function giveParameter() {
        $("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";
    }
</script>
</head>
<body>
    <a href="#" onClick="giveParameter();">引數傳遞</a>
    <a href="#" onClick="callIframeMethod();">呼叫子iframe方法</a>
    <a href="#" onClick="callIframeField();">呼叫子iframe變數</a>
    <a href="#" onClick="callIframeHtml();">呼叫子iframe元件</a></br>    
    <iframe id="ii" src="frame.htm" width="100%" frameborder="0"></iframe>
    <iframe id="new" src="newFrame.htm" width="100%" frameborder="0"></iframe>
</body>
</html>

frame.htm



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>顯示圖表</title>
<script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

var ff="adfdasfdsafdsafdsaf";
function test() {
    alert($("#dd").val());
}
function callMainField() {
    alert(parent.gg);
}
function callMainMethod() {
    parent.ggMM();
}
function callMainHtml() {
    alert(parent.$("#ii").attr("id"));
}
function getParameter() {
    alert(window.hellobaby);
}
</script>
</head>
<body>
    <a href="#" onClick="getParameter();">接受引數</a>
    <a href="#" onClick="callMainMethod();">呼叫子iframe方法</a>
    <a href="#" onClick="callMainField();">呼叫主視窗變數</a>
    <a href="#" onClick="callMainHtml();">呼叫子iframe元件</a>    
    <input id="dd" type="text" value="1111111111"/>
</body>
</html>

子介面(iframe中)的值傳遞到父介面(框架介面)
下面是主檔案的html部分
fu.html:
<iframe src="zi.html" name="myinfo"></iframe>
<javascript>

/*在父視窗獲取iframe的js變數*/
function flgetin(framename,valname){//1
var val=window.frames[framename].valname;
alert(val);
}//1
var framename='myinfo';
var valname='myname';
flgetin(framename,valname);

/*子視窗需要的變數*/
var mygroup="feilong";
</javascript>
下面是子檔案也就是iframe的html部分
zi.html:
<javascript>

/*在子視窗獲取父視窗的js變數*/
function flgetout(valname){//1
var val=parent.valname;
alert(val);
}//1
var valname='mygroup';
flgetout(valname);

/*父視窗需要的變數*/
var myname="feilong";
</javascript>

相關推薦

通過介面iframe介面框架介面進行控制

用到的知識點:iframe的呼叫包括以下幾個方面:(呼叫包含html dom,js全域性變數,js方法)主頁面呼叫iframe;iframe頁面呼叫主頁面;主頁面的包含的iframe之間相互呼叫;主要知識點1:document.getElementById("ii").co

編寫一個Java 應用程式,計算兩個大整數的和、差、積和商,並計算一個大整數的因 個數因子不包括1 和大整數本身

1 package ex6_2; 2 import java.math.BigInteger; 3 4 public class BigintegerExample { 5 public static void main(String[] args) { 6

10. 一幅灰度影象進行均值濾波、值濾波自己可適當原影象增加高頻噪聲

#include <iostream> #include <opencv2\core\core.hpp> #include <opencv2\highgui\highgui.hpp> #include <opencv2\imgproc

IOS菜鳥的所感所思(十二)——專輯介面和專輯歌曲資料的獲得

//在輸入框中輸入資訊點選查詢按鈕後呼叫方法 @interface SearchAlbumVC ()<UITableViewDelegate> @property (weak, nonatomic) IBOutletUITextField *searchContent; @prop

Python基礎列表變量與內存關系

地址 例如 close pen image hid pos pri post 在Python中,copy的是內存地址,引用的是列表的引用地址,列表裏存的是各個元素的地址 例如: name = [1,2,3,4,[‘xfxing‘,‘summer‘,6]] n2 = na

LeetCode 124. Binary Tree Maximum Path Sum最長路徑和,遞迴

Given a non-empty binary tree, find the maximum path sum. For this problem, a path is defined as any sequence of nodes from some starting node t

cartographer輸出姿態角ROS四元數轉尤拉角

目的: 將cartographer輸出位姿(/tf)中四元數轉換成尤拉角(姿態角)輸出(C++語言) 實現如下: 首先在cartographer_ros/node.h中添加發布器宣告 ::ros::Publisher rpy_publisher; cartog

設定你的開發環境Eclipse,IntelliJ IDEA的,NetBeans的

Libgdx專案中使用Gradle來管理依賴,構建過程,和IDE整合。您可以開發與任何開發環境,你喜歡你的應用程式。最重要的是:你的團隊可以使用不同的開發環境,同時工作在同一個專案!只是不提交你的IDE特定檔案到您的原始碼控制。如果你使用的Git包含在lib

使用Visio畫出各模型的關係一對一,多多,一對多等

一.使用Visio建立一個關係圖 點選新建如圖所示: 搜尋:uml資料庫表示法 選擇 uml資料庫表示法,得到如圖: 一.建立一個一對一關係圖 如圖: 三.建立一個一對多關係圖 如圖: 自此已經完成,有些人感覺這裡有虛線看著很難受,我們可以這樣

android圖片載入庫Glide4使用教程專案如何快速將Glide3替換成Glide4

我想大多數人在自己的專案中還是使用Glide3.7.1這個版本吧!不過Glide版本現在已經到4.4.0了! 當我們把Glide3更換成Glide4,會發現大部分地方都報錯了,那麼該怎樣快速替換Glide3為Glide4呢? 下面我們一起來看看怎樣實現Gli

redis偽叢集跟真實叢集相同,只是在一個伺服器上操作文章127.0.0.1為伺服器ip

在/usr/redis下建立一個redis-cluster的資料夾,將之前的安裝目錄拷貝到該資料夾下,(安裝目錄見上一篇文章)#cp redisAnzhuang/bin redis-cluster/redis01 -r進到redis01目錄下,刪除dump.rdb檔案,並修改

Android自定義切換佈局請求,無網路,無資料等

在一般的專案中,像請求中、無資料、無網路、請求超時等這些狀態的佈局我們需要經常切換。 在之前的專案中,我是在每個需要顯示這些佈局的xml檔案中都include請求中,無資料,無網路等這些佈局,然後再Activity中控制他們的顯示與隱藏,雖然能實現效果,但是控

小程式空佈局 非侵入載入、載入失敗、資料為空

# SmallProgramEmptyLayoutDemo程式必用的空佈局(包含載入中、載入為空、載入錯誤、自己的佈局)。完全不影響其他邏輯git地址:點選開啟連結介紹  空佈局, 包含記載中、載入為空、載入錯誤。 自己還是和原來那樣開發小程式那樣, 只是在你要使用空佈局的根

執行緒池Java有哪些方法獲取多執行緒

# 執行緒池(Java中有哪些方法獲取多執行緒) ## 前言 獲取多執行緒的方法,我們都知道有三種,還有一種是實現Callable介面 - 實現Runnable介面 - 實現Callable介面 - 例項化Thread類 - 使用執行緒池獲取 ## Callable介面 Callable介面,是一種

Maven項目如何具有繼承關系的項目的jar進行統一管理

不用 man 配置 maven rop 繼承關系 model art xmlns Maven項目中如何對具有繼承關系的項目的jar進行統一管理 1.Parent父項目:pom.xml配置 <project xmlns="http://maven.apache.org/

PHP如何二維數組按某個鍵值進行排序

取出 ria var index keyword 方式 pac plain 進行 $arr=[ array( ‘name‘=>‘張三‘, ‘age‘=>28 ), array( ‘name‘

Predicate和Consumer介面– Java 8java.util.function包下的介面

原文連結 作者:   Mohamed Sanaulla  譯者: 李璟([email protected]) 早先我寫了一篇《函式式介面》,探討了部分Java 8中函式式介面的用法。我也提及了Predicate介面屬於java.util.function包,在這篇文章中,我將展示如何

java中用正則表示式獲取一個指定的字元在字串出現的指定次數的下標索引,並且進行字串分割

在開發中遇到這樣的一個報文: 00000123000003RQ0 ################ 000003 <tellerLvl0>0</><brc>3004</><fPIflag>0</><

Java 往TreeSet集合儲存自定義物件學生,按照學生的年齡進行排序

Set:無序,不可以重複元素。|--HashSet:資料結構是雜湊表。執行緒是非同步的。保證元素唯一性的原理:判斷元素的hashCode值是否相同。如果相同,還會繼續判斷元素的equals方法,是否為true。|--TreeSet:可以對Set集合中的元素進行排序。底層資料

通過介面實現不同vlan間的互通也稱為:單臂路由

乙太網子介面常用於vlan間的三層互通和區域網與廣域網間的互聯。因傳統的三層網介面不支援vlan,當收到vlan報文時會當做非法報文而丟棄,通過在子介面上部署終結子介面功能將vlan報文中的vlan標籤去掉,從而實現vlan間的三層互通(終結子介面不僅能剝離vlan,也能新