前端外部链接询问跳转

最新推荐文章于 2024-04-30 10:01:34 发布

sodakii

最新推荐文章于 2024-04-30 10:01:34 发布

阅读量464

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/sodakii/article/details/127101405

版权

1.场景

访问网站中的第三方链接时，询问是否离开本网站。

注意：此封装不适应用于跨域的 iframe

2.版本说明

下载地址：checkDomian_v2.rar

版本：v2

U 修改 a 标签不存在 href 属性时的报错问题
U 优化模态框的创建过程，将手动创建改为自动创建
A 添加在 iframe 中的使用
A 跳转询问密码（需另外引入md5文件，详见下文）

3.引用

引用样式

1	`<link` `rel="stylesheet"` `href="css/bootstrap2.css">`

引用 js

此函数依赖jquery

1 2	`<script` `src="js/jquery.min.js"></script>` `<script` `src="js/bootstrap-modal.js"></script>`

4.代码实现

函数定义

/**

* 外链确认跳转

* @param event 触发事件Event对象

* @param outerURL 外链地址

* @param {Array} settings.domainUrl 当前站点域名（eg:['192.168.0.1']）

* @param {String} settings.domainName 当前站点名，默认为domainUrl值（eg:武汉佳软）

* @param {Number} domainType 调用的dom元素类型，a或select，0代表元素类型为a，1代表元素类型为select 默认值为0（note:a与map的子标签area类型都为a）

*

* eg:checkDomain(event,this.href,{domainUrl:['192.168.1.25','192.168.1.26'],domainName:'武汉佳软'})

* eg:checkDomain(event,this.href,{domainUrl:['192.168.1.25','192.168.1.26'],domainName:'武汉佳软',domainType:0});

* eg:checkDomain(event,this.href,{domainUrl:['192.168.1.25','192.168.1.26'],domainName:'武汉佳软',domainType:1});

*/

function checkDomain(event, outerURL, settings) {

if (!arguments[0]) {

alert("传入的参数格式有误！");

return;

}

if (!arguments[1]) {

return;

}

var defaultSetting = {

domainUrl: [window.location.host],

domainName: window.location.host,

domainType: 0

}

var extendSetting = $.extend(defaultSetting, settings);

// 判断是否是完整的链接

if (/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/.test(outerURL)) {

// 链接的地址不为空也不为javascript:

if (typeof(outerURL) !== "undefined" && outerURL !== "" && outerURL.toLowerCase().indexOf("javascript:") == -1) {

// 循环配置的域名，判断当前的链接是否存在在配置的域名中

var domainUrlFlag = false;

for (var item in extendSetting.domainUrl) {

if (outerURL.toLowerCase().indexOf(extendSetting.domainUrl[item]) == -1) {

domainUrlFlag = false;

} else {

domainUrlFlag = true;

break;

}

if (!domainUrlFlag) {// 当前的链接不存在在配置的域名中，弹出询问框

//阻止默认事件

if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}

if ($("#bootstrapModelElement").length === 0) {//判断model dom是否存在，存在，直接显示；不存在，创建后再显示

var bootstrapModelElement = '<div id="bootstrapModelElement" class="modal hide fade" tabIndex="-1" role="dialog" aria-hidden="true">' +

'<div class="modal-header">' +

'<button type="button" class="bootstrap-close" data-dismiss="modal" aria-hidden="true">× </button>' +

'<h3> </h3>' +

'</div>' +

'<div class="modal-body">' +

'<p>您访问的链接即将离开"' + extendSetting.domainName + '"门户网站是否继续？</p>' +

'</div>' +

'<div class="modal-footer">' +

'<button class="bootstrap-btn bootstrap-btn-default" data-dismiss="modal" aria-hidden="true">放弃</button> ' +

'<button onclick="javasript:window.open(\'' + outerURL + '\'); $(\'#bootstrapModelElement\').modal(\'hide\');" class="bootstrap-btn bootstrap-btn-danger">继续访问</button>' +

'</div>' +

'</div>';

$("body").append(bootstrapModelElement);

}

$("#bootstrapModelElement").modal('show');

} else {//当前的链接存在在配置的域名中，直接跳转

if (1 === parseInt(extendSetting.domainType)) {//调用的dom元素类型为select时，在新窗口打开页面

window.open(outerURL);

}

// else 调用的dom元素类型为a和map时，在新窗口打开页面

}

函数调用

行内 a或map 标签调用

代码实例

1	`<a` `onclick="checkDomain(event,this.href,{domainUrl:['192.168.1.25','192.168.1.163'],domainName:'武汉佳软'})"` `href="百度一下，你就知道">完整的地址：百度一下，你就知道</a>`

代码示例

行内 select 标签调用

代码实例

<select onchange="if(this.selectedIndex>0){checkDomain(event,this.value,{domainUrl:['192.168.1.25','192.168.1.163'],domainName: '武汉佳软',domainType:1});this.selectedIndex=0;}">

<option value="">--请选择--</option>

<option value="http://www.baidu.com">http://www.baidu.com</option>

<option value="http://www.hao123.com">http://www.hao123.com</option>

<option value="http://192.168.1.25">192.168.1.25</option>

<option value="http://192.168.1.163">192.168.1.163</option>

</select>

script 中 a或map 标签调用

代码实例

$(document).on("click", "a", function (event) {

var outerURL = $(this).attr("href");

if (outerURL) {

checkDomain(event, outerURL, {

domainUrl: ["192.168.0.1"],

domainName: "武汉佳软"

});

}

});

script 中 select 标签调用

代码实例

如果需要将所有的 select 标签都应用此方法，使用 $("select").each(function () {});。

示例如下：

$("select").each(function () {

$(this).change(function (event) {

var outerURL = $(this).val();

if (outerURL) {

checkDomain(event, outerURL, {

domainUrl: ["192.168.0.1"],

domainName: "武汉佳软"

});

// 跳转后将 select 的选项重置为第一项

this.selectedIndex = 0;

}

});

如果需要将部分的 select 标签都应用此方法，此处不建议这样操作，建议为需要添加此方法的 html 元素添加一个 class。

示例如下：

为 select 添加一个 class 为 checkDomain

1 2	`<select` `class="checkDomain">` `<select>`

调用时，只对添加了 class 为 checkDomain 的元素进行调用

$(".checkDomain").each(function () {

$(this).change(function (event) {

var outerURL = $(this).val();

if (outerURL) {

checkDomain(event, outerURL, {

domainUrl: ["192.168.0.1"],

domainName: "武汉佳软"

});

// 跳转后将 select 的选项重置为第一项

this.selectedIndex = 0;

}

});

5.扩展

在 iframe 中的调用

由于不同域名下的页面无法进行方法和元素的互相访问，所以此处的 iframe 的调用不支持跨域的 iframe 对象

html 结构

1 2	`<iframe` `id="checkDomianIframeID"` `name="checkDomianIframeName"` `src="you_url.html"` `frameborder="0"` `width="100%"` `height="400px"></iframe>`

js 代码

$(document).ready(function () {

// 使用 window.frames['checkDomianIframeName'] 或 document.getElementById("checkDomianIframeID").contentWindow;获取iframe

var checkDomianIframe = window.frames['checkDomianIframeName'];

// 监听 iframe 的 load 事件

if (checkDomianIframe.attachEvent) {// ie

checkDomianIframe.attachEvent('onload', function () {

_dealIframe(checkDomianIframe);

});

} else {// 其它

checkDomianIframe.onload = function () {

_dealIframe(checkDomianIframe);

};

}

});

function _dealIframe(iframeName) {

// 获取 iframe 的 document 对象

var iframeEel = iframeName.document;

$(iframeEel).on("click", "a", function (event) {

var outerURL = this.getAttribute("href");

if (outerURL) {

checkDomain(event, outerURL, {

domainUrl: ["192.168.0.1"],

domainName: "武汉佳软"

});

}

});

}

跳转询问密码（密码加密）

代码实例

效果图

文件引入

引入md5加密文件，下载地址：md5.min.js

<script src="js/md5.min.js"></script>

加密密码，得到加密后的密码，修改 authPassword 参数

在线加密网址：MD5在线加密 - MD5加密工具 - MD5在线生成

`函数调用`

1	`checkDomain(event,this.href,{domainUrl:['192.168.1.25','192.168.1.26'],domainName:'武汉佳软',domainType:1,authName:'湖北政府',authUrl:'htt://www.baidu.com',authPassword:'e10adc3949ba59abbe56e057f20f883e'});`

函数定义修改为以下代码

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

/**

* 外链确认跳转

* @param event 触发事件Event对象

* @param outerURL 外链地址

* @param {Array} settings.domainUrl 当前站点域名（eg:['192.168.0.1']）

* @param {String} settings.domainName 当前站点名，默认为domainUrl值（eg:武汉佳软）

* @param {Number} settings.domainType 调用的dom元素类型，a或select，0代表元素类型为a，1代表元素类型为select 默认值为0（note:a与map的子标签area类型都为a）

* @param {String} settings.authName 需要验证的站点名

* @param {String} settings.authUrl 需要验证的地址

* @param {String} settings.authPassword 需要验证的地址的密码（MD5加密后密码）

*

* eg:checkDomain(event,this.href,{domainUrl:['192.168.1.25','192.168.1.26'],domainName:'武汉佳软'})

* eg:checkDomain(event,this.href,{domainUrl:['192.168.1.25','192.168.1.26'],domainName:'武汉佳软',domainType:0});

* eg:checkDomain(event,this.href,{domainUrl:['192.168.1.25','192.168.1.26'],domainName:'武汉佳软',domainType:1});

* eg:checkDomain(event,this.href,{domainUrl:['192.168.1.25','192.168.1.26'],domainName:'武汉佳软',domainType:1,authName:'湖北政府',authUrl:'htt://www.baidu.com',authPassword:'123456'});

*/

function checkDomain(event, outerURL, settings) {

if (!arguments[0]) {

alert("传入的参数格式有误！");

return;

}

if (!arguments[1]) {

// alert("传入的参数格式有误！");

return;

}

var defaultSetting = {

domainUrl: [window.location.host],

domainName: window.location.host,

domainType: 0,

authName: '',

authUrl: '',

authPassword: '',

}

var extendSetting = $.extend(defaultSetting, settings);

// 判断是否是完整的链接

if (/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/.test(outerURL)) {

// 链接的地址不为空也不为javascript:

if (typeof (outerURL) !== "undefined" && outerURL !== "" && outerURL.toLowerCase().indexOf("javascript:") == -1) {

// 循环配置的域名，判断当前的链接是否存在在配置的域名中

var domainUrlFlag = false;

for (var item in extendSetting.domainUrl) {

if (outerURL.toLowerCase().indexOf(extendSetting.domainUrl[item]) == -1) {

domainUrlFlag = false;

} else {

domainUrlFlag = true;

break;

}

if (!domainUrlFlag) {// 当前的链接不存在在配置的域名中，弹出询问框

//阻止默认事件

if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}

if ($("#bootstrapModelElement").length === 0) {//判断model dom是否存在，存在，直接显示；不存在，创建后再显示

if (extendSetting.authUrl && outerURL.indexOf(extendSetting.authUrl) !== -1) {

var bootstrapModelElement = '<div id="bootstrapModelElement" class="modal hide fade" tabIndex="-1" role="dialog" aria-hidden="true">' +

'<div class="modal-header">' +

'<button type="button" class="bootstrap-close" data-dismiss="modal" aria-hidden="true">× </button>' +

'<h3> </h3>' +

'</div>' +

'<div class="modal-body">' +

'<p>您访问的链接即将离开"' + extendSetting.domainName + '"门户网站，进入"' + extendSetting.authName + '"网站，输入密码后 <input id="bootstrapModelPassword" style="width: 80px;margin-bottom: 0;" type="password"/> 继续？</p>' +

'<p id="bootstrapModelPasswordTip" style="color: red;"></p>' +

'</div>' +

'<div class="modal-footer">' +

'<button onclick="handleCancleBoostrapModelPassword()" class="bootstrap-btn bootstrap-btn-default">放弃</button> ' +

'<button onclick="handleCheckBoostrapModelPassword(\'' + outerURL + '\',\'' + extendSetting.authPassword + '\')" class="bootstrap-btn bootstrap-btn-danger">继续访问</button>' +

'</div>' +

'</div>';

} else {

var bootstrapModelElement = '<div id="bootstrapModelElement" class="modal hide fade" tabIndex="-1" role="dialog" aria-hidden="true">' +

'<div class="modal-header">' +

'<button type="button" class="bootstrap-close" data-dismiss="modal" aria-hidden="true">× </button>' +

'<h3> </h3>' +

'</div>' +

'<div class="modal-body">' +

'<p>您访问的链接即将离开"' + extendSetting.domainName + '"门户网站，是否继续？</p>' +

'</div>' +

'<div class="modal-footer">' +

'<button class="bootstrap-btn bootstrap-btn-default" data-dismiss="modal" aria-hidden="true">放弃</button> ' +

'<button onclick="javasript:window.open(\'' + outerURL + '\'); $(\'#bootstrapModelElement\').modal(\'hide\');" class="bootstrap-btn bootstrap-btn-danger">继续访问</button>' +

'</div>' +

'</div>';

}

$("body").append(bootstrapModelElement);

}

$("#bootstrapModelElement").modal('show');

} else {//当前的链接存在在配置的域名中，直接跳转

if (1 === parseInt(extendSetting.domainType)) {//调用的dom元素类型为select时，在新窗口打开页面

window.open(outerURL);

}

// else 调用的dom元素类型为a和map时，在新窗口打开页面

}

// 检验密码

function handleCheckBoostrapModelPassword(outerURL, authPassword) {

var bootstrapModelPassword = $('#bootstrapModelPassword').val();

bootstrapModelPassword = md5(bootstrapModelPassword);

if (bootstrapModelPassword === authPassword) {

window.open(outerURL);

$('#bootstrapModelElement').modal('hide');

$("#bootstrapModelPasswordTip").text("");

$("#bootstrapModelPassword").val("");

} else {

$("#bootstrapModelPasswordTip").text("输入的密码有误！")

}

// 放弃跳转

function handleCancleBoostrapModelPassword() {

$('#bootstrapModelElement').modal('hide');

$("#bootstrapModelPasswordTip").text("");

$("#bootstrapModelPassword").val("");

}

外部引用

1.为元素定义id或class

<a id="jsAccessLink" href="javascript:;" target="_blank">内部链接，打开新窗口，不提示：http://120.202.174.114:8008/menu/index.php</a>

2.外部js引用

下载地址：check-domian-v2.js

<script src="js/check-domian-v2.js"></script>

check-domian-v2.js 文件代码

$("#jsAccessLink").on("click", function (event) {

// outerURL根据实际情况进行修改

var outerURL = "http://120.202.174.114:8008/menu/index.php?url=";

if (outerURL) {

checkDomain(event, outerURL, {

domainUrl: ['www.baidu.com'],

domainName: '武汉佳软',

authName: '湖北政府',

authUrl: 'http://120.202.174.114:8008/menu/index.php',

authPassword: '348c418fd1f0af13f443dc437b11d84a'

})

}

});

sodakii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端外部链接询问跳转

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081/*** 外链确认跳转。
复制链接

扫一扫