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);
}
如果有好的方法,請大神指點