jQuery 接管iframe內a 標籤請求

jQuery 處理iframe內 接管a 標籤請求

用處:

在Electron 做桌面程序時,有時會用到web頁面,當頁面中存在 a標籤時,如果點擊會使用原先的窗口彈出程序,但我們會想着修改成 Web Browser和指定窗口打開,這是就需要攔截頁面內的a標籤事件,常用的a標籤target值如下

在這裏插入圖片描述

依賴項:jquery.js

下面是推薦使用方法,具體參考 electron的webview標籤之新開窗口
這個方法需要將iframe改成webview,iframe能不能使用沒有測試過。

	$(webSelector).on('new-window', (e) => {
        var url = e.url||e.originalEvent.url;
        if (url.indexOf('http:')>=0 || url.indexOf('https:')>=0) {
            //shell.openExternal(e.url)
            callback(url); 
            //window.open(url)
        }
    });

以下的方法之前的解決方法並不好,當嵌套頁面過多時,會有漏網之魚,***不推薦***

        /**
         * 接管所有彈出窗口請求
         * 使用回調函數處理 需要接管後的操作
         * @param iframe jquery iframe對象
         * @param target 接管的Tager類型 [_blank	在新窗口中打開被鏈接文檔。_self	默認。在相同的框架中打開被鏈接文檔。_parent	在父框架集中打開被鏈接文檔。_top	在整個窗口中打開被鏈接文檔。framename	在指定的框架中打開被鏈接文檔。]        
         * @callback 回調函數,會返回2個參數 [e:所有target="_black"點擊的事件源;url 獲取到的url路徑]
         */
       iframeTargetClick:function(iframe,target,callback){
            if(typeof target=="function"){
                callback=target;
                target=undefined;
            }
            var find=!target?"a:not([href^='#'])":"[target='"+target+"']";
            iframe.load(function(){
                iframe.contents().find(find).click(function(e){
                    var url=$(this).attr("href");
                    callback(e,url)
                });
                var ifrmaes=iframe.contents().find("iframe");
                if(iframes.length>0){
                    for(var i=0;i<iframe.length;i++){
                        $.fn.iframeTargetClick($(iframe[i]),target,callback);
                    }
                }
            });

外部調用

    $.iframeTargetClick($("#frame"),"_blank",function(e,url){
        openToBrowser(url,e);
    });

補充 openToBrowser(electron 用瀏覽器打開方法)方法

const shell = require('electron').shell;

/**
 * 使用瀏覽器打開url
 * @param url 打開的url
 * @param e 點擊事件源,可選,如果不填則需要手動 處理保證事件不在處理
 */

function openToBrowser(url,e){
    (e)&&(e.preventDefault()); //給頁面該事件不在處理
    shell.openExternal(url);
}

如果有好的方法,請大神指點

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章