layui的iframe父子操作方法

来源:https://www.cnblogs.com/spaortMan/archive/2020/04/17/12720513.html
-Advertisement-
Play Games

背景:layui 通過調用 open方法,type:2,打開iframe彈窗 註意:以下方法使用需在服務上運行,否則會出現以下報錯,導致方法失效 需求1:點擊關閉彈窗時,父頁面獲取彈窗內的dom元素 1 //在關閉彈窗時,獲取彈窗內的dom元素 2 cancel: function (index, ...


背景:layui 通過調用 open方法,type:2,打開iframe彈窗

  

  註意:以下方法使用需在服務上運行,否則會出現以下報錯,導致方法失效

 

 

 

  需求1:點擊關閉彈窗時,父頁面獲取彈窗內的dom元素

1 //在關閉彈窗時,獲取彈窗內的dom元素
2 cancel: function (index, layero) {
3           var form = $(layero).find("iframe")    
4           [0].contentWindow.document.getElementById("dom元素id")
5           console.log(form)
6         }    

 

  需求2:在父頁面調用彈窗內的的方法

1 // 點擊關閉彈窗時,在回調函數中調用iframe內的方法
2 cancel: function (index, layero) {
3           window[layero.find('iframe')[0]['name']].test();
4         }

 

  需求3:在彈窗內調用父頁面的方法

      註:此情況為調用的方法在layui.use內;如果方法暴露在外面,那麼在彈窗內可通過 window.add(1,2) 調用

// 彈窗內調用父級頁面內的方法

 // 父級頁面的方法示例
layui.use(['jquery', 'layer'], function () {
      var $ = layui.$, //重點處
        layer = layui.layer;
      
      var add = function (x, y) {
        return x + y;
      }
      window.add = add;
    });


//彈窗內調用方法示例
window.parent.add(1,2);

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • p5.js完成星際穿越特效 歡迎關註我的 "博客" ,⬅️點他即可。 星際穿越,是模仿漫天星辰撲面而來的感覺。 最關鍵的在於對透視的掌握。 參考資料:The Coding Train 00 思路構想 1. 星星是一個圓,會隨機的出現在屏幕的任何位置; 2. 星星會從遠處到眼前: 圓的大小 來表示遠近 ...
  • ES6 axios執行原理 Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中 http://www.axios-js.com/zh-cn/docs/ 1. axios.get('1111.json') .then(response => { consol ...
  • (1) 鏈接式:(外部引入.css文件) ( 用得比較多 ) <link>在html載入前就被引用 在網頁的<head></head>標簽對中用<link>引入外部樣式表,使用html規則引入外部css : <link href="./css/style.css" rel="stylesheet" ...
  • 一、塌陷 1.當position設置為:absolute或者fixed時,元素的display會轉換為block。(設置float也會產生這樣的效應) 2.正常情況下,div會被內容撐開,但是如果設置了 1. 的情況下,父元素就會產生 塌陷 ,失去高度。 解決辦法: 給父元素設置高度。 給父元素設置 ...
  • 在項目中用到cookie一般是用在註冊時的記住賬號密碼或保存固定時間的數據 // cookie 存儲setCookie(c_name, c_pwd, exdays) { // 設置存儲用戶名密碼 var exdate = new Date(); exdate.setTime(exdate.getTi ...
  • 1. 事件流(事件傳播) 描述的是從頁面接收事件的順序。 IE事件流是事件冒泡流,NetScape是事件捕獲流。 window: window document: document html: document.documentElement body: document.body div: doc ...
  • 本文隨便寫了點自己對WebSoket通訊協議理解,在兩種框架上玩的Demo,然後踩了幾個坑還有沒填上的坑(歡迎評論指導一下)。 WebSocket是什麼?使用WebSocket的原因? WebSocket是網路通訊協議的一種。 提到網路通訊協議,我第一個就想到了HTTP協議,但是HTTP協議的一些特 ...
  • "概要" "antd pro 路由簡介" "路由, 菜單和麵包屑" "頁面之間的路由" "帶參數的路由" "總結" 概要 路由配置是單頁應用的核心之一, antd pro 將所有的路由配置集中在一個文件中, 可以更好的對應用的全局進行管理. 同時, 它的路由還和菜單和麵包屑自動關聯上了, 真的是給開 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...