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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...