原生js判断链接是否有效

已于 2024-05-27 06:29:45 修改
阅读量961 收藏 2
点赞数
分类专栏： 前端开发 文章标签： javascript 前端 ajax
于 2022-10-11 12:49:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiqinzhe/article/details/127261297
版权

这很简单，我们可以通过请求的方式确定是否有效。本文通过ajax和jsonp实现。

通过ajax发起http请求会存在跨域问题，因为浏览器存在同源策略。何为跨域？我也不太清楚，以下几个例子可能对你理解跨域有帮助

协议不同、子域名不同、主域名不同、端口不同、一个页面用子域名和一个页面用主域名、一个页面用ip和一个页面用域名；满足以上一个条件即为跨域。

跨域

http://localhost.com
https://localhost.com
跨域，协议不同

http://test.localhost.com
http://www.localhost.com
跨域，子域名不同

http://localhost.com
http://test.com
跨域，主域名不同

http://localhost.com:80
http://localhost.com:8080
跨域，端口不同

http://localhost.com
http://test.localhost.com
跨域

http://localhost.com
http://127.0.0.1.com
跨域

解决跨域的方法有很多，jsonp就是其中之一。原理大概就是利用了浏览器对标签的src属性没有同源限制这一条。

<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=百度翻译?cb=DataFun" type="text/javascript" charset="utf-8"></script>

DataFun是接收数据的回调函数

本文中的ajax是判断站内链接，jsonp判断站内外链接（可设置一律使用jsonp判断）

不再废话，上代码

代码

getUrlState.html

<!DOCTYPE html>
<html>
	<head>
		<title>getUrlState</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./css/style.css">
		<link rel="stylesheet" href="./css/getUrlState.css">
	</head>
	<body>
		<div class="main">
			<div class="InformationDiv">
				<div class="TitleH3">
					<h3>你正在测试链接是否有效</h3>
				</div>
				<p>
					<span>你正在测试的链接地址：</span>
				    <span>https://baoidu.com</span>
				</p>
			</div>
			<div class="ButtonList">
				<button>取消访问</button>
				<button>继续访问</button>
			</div>
		</div>
	</body>
	<script src="./JavaScript/getUrlState.js"></script>
	<script type="text/javascript">
		var url = 'http://127.0.0.1';
		// url='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=百度翻译'
		document.querySelector('p>span:nth-child(2)').innerText = url;
		getUrlState({
			type: 'get',
			url: url,
			async:false,
			RequestType: 'JsonP',
			Timeout: '1000',
			State: function(state) {
				console.log(state);
				if(state.state === 404){
					document.querySelectorAll('.ButtonList>button')[1].style.backgroundColor = '#f3f3f3';
					document.querySelectorAll('.ButtonList>button')[1].style.borderColor = '#f3f3f3';
					document.querySelectorAll('.ButtonList>button')[1].style.color = '#008CD6';
					document.querySelectorAll('.ButtonList>button')[1].disabled = 'disabled';
					document.querySelector('.TitleH3>h3').innerText = '温馨提示：你正在测试的是无效链接';
				}
				if(state.state === 200){
					document.querySelector('.TitleH3>h3').innerText = '温馨提示：你正在测试的是有效链接';
					document.querySelectorAll('.ButtonList>button')[1].onclick=function(){
						window.location.replace(url);
					}
				}
				document.querySelectorAll('.ButtonList>button')[0].onclick=function(){
					window.close();
				}
			}
		});
	</script>
</html>

style.css

* {
	margin: 0px;
	padding: 0px;
	/* 好看的颜色#006d9a */
	/* rgb(0,140,214)==#008CD6;来源:ai文件 */
}

ul,
ol,
li {
	list-style-type: none;
}

input,
textarea,
button {
	outline: none;
}

a {
	text-decoration: none;
}

.logo,
.ButtonList,
.Footer,
.LinkList,
.Tips,
.Tips>* {
	-moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	/*适用ie*/
	-ms-user-select: none;
	user-select: none;
}

/* word-break: break-word; */
/* 文本行的任意字内断开 */
/* word-wrap: break-word; */
/* IE */
/* white-space: -moz-pre-wrap; */
/* Mozilla */
/* white-space: -hp-pre-wrap; */
/* HP printers */
/* white-space: -o-pre-wrap; */
/* Opera 7 */
/* white-space: -pre-wrap; */
/* Opera 4-6 */
/* white-space: pre; */
/* CSS2 */
/* white-space: pre-wrap; */
/* CSS 2.1 */
/* white-space: pre-line; */
/* font-size: 21px; */

getUrlState.css

body {
	width: 100vw;
	height: 100vh;
	background-color: #f3f3f3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.main {
	width: 337px;
	min-width: 147px;
	padding: 25px;
	border-radius: 5px;
	background-color: #FFFFFF;
	border: 1.5px solid #008CD6;
}

.ButtonList {
	width: 100%;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.ButtonList>button {
	height: 100%;
	color: #f3f3f3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	padding: 1px 6px;
	border-radius: 3px;
	box-sizing: border-box;
	border: 1.5px solid #008CD6;
	background-color: #008CD6;
}

.ButtonList>button:hover {
	background-color: #006d9a;
}

.ButtonList>button+button {
	margin-left: 10px;
}

.TitleH3 {
	width: 100%;
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}

p {
	width: 100%;
	border-bottom: 1px solid #008CD6;
	padding-bottom: 5px;
	margin-bottom: 15px;
	word-wrap: break-word;
	text-align: justify;
}

p>span:nth-child(2) {
	text-decoration: none;
	color: #008CD6;
	word-break: break-all;
}

@media screen and (max-width: 389px) {
	.main {
		width: calc(90vw - 30px);
		height: auto;
		padding: 15px;
	}
}

getUrlState.js

(function(event) {
	// 解决IE（对象不支持“assign”属性或方法）
	if (typeof Object.assign != 'function') {
		Object.assign = function(target) {
			'use strict';
			if (target == null) {
				throw new TypeError('Cannot convert undefined or null to object');
			}

			target = Object(target);
			for (var index = 1; index < arguments.length; index++) {
				var source = arguments[index];
				if (source != null) {
					for (var key in source) {
						if (Object.prototype.hasOwnProperty.call(source, key)) {
							target[key] = source[key];
						}
					}
				}
			}
			return target;
		};
	}
	// 解决IE（对象不支持“includes”属性或方法）
	if (!String.prototype.includes) {
		String.prototype.includes = function(search, start) {
			if (typeof start !== 'number') {
				start = 0;
			}

			if (start + search.length > this.length) {
				return false;
			} else {
				return this.indexOf(search, start) !== -1;
			}
		};
	}

	function getUrlState(parameter) {
		let Default = {
			type: 'get',
			url: null,
			RequestType: 'jsonp',
			async: true,
			CustomMethod:null,
			Timeout: 1000,
			State: function(state) {
				console.log(state);
			}
		}
		getUrlState.Default = Default;
		getUrlState.parameter = parameter;
		// parameter
		getUrlState.prototype.init(Object.assign({}, Default, parameter));
	}
	// 初始化
	getUrlState.prototype.init = function(parameter) {
		parameter.RequestType = parameter.RequestType.trim().toLowerCase() || 'jsonp';
		if (parameter.url) {
			if (parameter.url.replace(/(\s)/g, "")) {
				if (Object.prototype.toString.call(parameter.url) !== '[object String]') {
					getUrlState.prototype.error('url属性必须为String类型',parameter);
				}else{
					function UrlState(parameter) {
						this.state = null;
						this.data = null;
					}
					let UrlStateObject = new UrlState();
					getUrlState.UrlStateObject = UrlStateObject;
					getUrlState.DataFun = function(data) {
						UrlStateObject.data = data;
					}
				}
			} else {
				getUrlState.prototype.error('url属性必须存在',parameter);
			}
		} else {
			getUrlState.prototype.error('url属性必须存在',parameter);
		}

		parameter.Timeout = parseInt(parameter.Timeout);
		if (!parameter.Timeout || parameter.Timeout === NaN || parameter.Timeout === undefined) {
			parameter.Timeout = 1000;
		}

		if (parameter.Timeout < 0) {
			getUrlState.prototype.error('Timeout属性值不能小于零',parameter);
		}
		if (parameter.async && Object.prototype.toString.call(parameter.async) !== '[object Boolean]') {
			getUrlState.prototype.error('async属性必须为Boolean类型',parameter);
		}
		if (parameter.RequestType) {
			if (Object.prototype.toString.call(parameter.RequestType) === '[object String]') {
				if (!parameter.RequestType.replace(/(\s)/g, "")) {
					getUrlState.prototype.error('RequestType属性必须存在',parameter);
				}
			} else {
				getUrlState.prototype.error('RequestType属性必须为String类型',parameter);
			}
		} else {
			getUrlState.prototype.error('RequestType属性必须存在',parameter);
		}
		(function WebAgreement(url) {
			var check_www = 'w{3}' + '[^\\s]*';
			var check_http = '(https|http|ftp|rtsp|mms|tls|tcp|websocket|udp|dns)://' + '[^\\s]*';
			var strRegex = check_www + '|' + check_http;
			var httpReg = new RegExp(strRegex, 'gi');
			if (!url.match(httpReg)) {
				if (url.substring(0, 2) !== "./" && url.substring(0, 3) !== "../") {
					parameter.url = "./" + parameter.url;
				}
				getUrlState.prototype.Ajax(parameter);
			} else {
				parameter.url = url.match(httpReg)[0];
				if (parameter.RequestType.toLowerCase() === 'jsonp') {
					getUrlState.prototype.EstablishScript(parameter);
				} else {
					getUrlState.prototype.Ajax(parameter);
				}
			}
		})(parameter.url);
	}
	// Ajax方式判断
	getUrlState.prototype.Ajax = function(parameter) {
		var BxzAjax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
		parameter.type = parameter.type.trim().toLowerCase() || 'get';
		if (parameter.async === 'false' || parameter.async === false) {
			parameter.async = false;
		} else {
			parameter.async = true;
		}

		BxzAjax.open(parameter.type, parameter.url, parameter.async);
		if (parameter.type === 'post') {
			BxzAjax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		}
		if (parameter.RequestType === 'json' && parameter.type === 'post') {
			BxzAjax.setRequestHeader("Content-Type", "application/json");
		}
		BxzAjax.send(null);
		var setTime = setTimeout(function() {
			// 取消请求
			BxzAjax.abort();
			getUrlState.prototype.load('Ajax', 404, parameter, null);
			clearTimeout(setTime);
		}, (parameter.Timeout) + 1);
		if (parameter.async) { //异步
			BxzAjax.onreadystatechange = function() {
				if (BxzAjax.readyState === 4) {
					if (BxzAjax.status === 200) {
						clearTimeout(setTime);
						if (BxzAjax.response) {
							// getUrlState.UrlStateObject.data = JSON.parse(BxzAjax.response);
						}
						getUrlState.prototype.load('Ajax', 200, parameter, null);
					}
				}
			}
		} else {
			if (BxzAjax.readyState === 4) {
				if (BxzAjax.status === 200) {
					clearTimeout(setTime);
					if (BxzAjax.response) {
						// getUrlState.UrlStateObject.data = JSON.parse(BxzAjax.response);
					}
					getUrlState.prototype.load('Ajax', 200, parameter, null);
				}
			}
		}
	}

	// 创建script标签
	getUrlState.prototype.EstablishScript = function(parameter) {
		try {
			var symbol = parameter.url.includes("?") ? "&" : "?";
			//创建script标签
			var script = document.createElement("script");
			script.type = 'text/javascript';
			script.charset = 'scriptCharset';
			script.async='async';
			//填写请求地址,添加要传递的数据,传递一个回调函数
			script.src = parameter.url + symbol + "&cb=getUrlState.DataFun";
			//这个时候我们需要把准备好的script标签添加到页面 最好是添加到脚本以后
			document.body.appendChild(script);
			getUrlState.prototype.EstablishIframe(parameter);
			getUrlState.prototype.ScriptState(script, parameter);
		} catch (error) {
			getUrlState.prototype.error('创建script标签时发生错误',parameter);
		} //捕获错误，其中error就是new Error() 的实例
	}
	// script标签状态
	// label标签
	getUrlState.prototype.ScriptState = function(script, parameter) {
		try {
			var Time = 0;
			var setTime = setTimeout(function() {
				Time = (parameter.Timeout) + 1;
				clearTimeout(setTime);
			}, (parameter.Timeout) + 1);
			if (script.readyState && Time <= parameter.Timeout) { //IE
				script.onreadystatechange = function() {
					if (script.readyState == 'complete' || script.readyState == 'loaded') {
						script.onreadystatechange = null;
						getUrlState.prototype.load(null, 200, parameter, script);
					} else {
						getUrlState.prototype.load(null, 404, parameter, script);
					}
				}
			} else if (Time <= parameter.Timeout) { //非IE
				script.onload = function() {
					getUrlState.prototype.load(null, 200, parameter, script);
				}
				script.onerror = function(error) {
					getUrlState.prototype.load(null, 404, parameter, script);
				}
			} else {
				getUrlState.prototype.load(null, 404, parameter, script);
			}
		} catch (error) {
			getUrlState.prototype.error('获取script标签状态时出现错误',parameter);
		} //捕获错误，其中error就是new Error() 的实例
	}
	
	
	getUrlState.prototype.EstablishIframe = function(parameter) {
		try {
			var iframe = document.createElement("iframe");
			iframe.width = 0;
			iframe.height = 0;
			iframe.style.display = 'none';
			iframe.frameborder = 'on';
			iframe.src = parameter.url;
			document.body.appendChild(iframe);
	    } catch (error) {
			getUrlState.prototype.error('获取Iframe标签状态时出现错误',parameter);
		} //捕获错误，其中error就是new Error() 的实例
	}
	
	// <iframe src="" width="" height=""></iframe>
	
	// 完成
	getUrlState.prototype.load = function(who, State, parameter, script) {
		if (parameter.CustomMethod && Object.prototype.toString.call(parameter.CustomMethod) === '[object Function]') {
			getUrlState.UrlStateObject['state'] = State;
			parameter.CustomMethod(getUrlState.UrlStateObject);
		}else{
			if (parameter.State && Object.prototype.toString.call(parameter.State) === '[object Function]') {
				getUrlState.UrlStateObject['state'] = State;
				console.log(getUrlState.UrlStateObject)
				parameter.State(getUrlState.UrlStateObject);
			}
		}
		if (who !== 'Ajax' && who !== 'error') {
			document.body.removeChild(script);
		}
	}
	// 代码或操作出错
	getUrlState.prototype.error = function(error,parameter) {
		getUrlState.prototype.load('error', 404, parameter, null);
		throw Error(error);
	}
	event.getUrlState = getUrlState;
})(window);

若有错误或不足之处，敬请指教

部分浏览器尚不兼容，若有方法，敬请指教

以下链接为本文代码压缩文件，你可以直接下载（有免费链接在简介里）

知勤者笔记
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Js检测判断URL网址输入是否正确
10-28
JavaScript检测判断用户输入的URL是否正确，简单的正则规则，很准确的判断URL的合法性，值得借鉴。
js检测判断链接(URL)是否有效(服务可用)
学习笔记
02-21 1万+
如何用javascript来判断请求的url/链接有效(可连接,可用)? 引言 有一个通讯录系统, 同时部署在几台服务器上, 但是主页上有个通讯录的链接, 链接到这个系统. 问题是, 有时候链接指向的服务器出故障, 于是希望在这个服务器出故障(服务不可用)的情况下, 能指向其他服务器的链接. 解决方案一: XMLHTTP方案 function getURL(url) {
js 检测链接是否有效
felixsyan的专栏
02-16 233
//检测链接是否有效 function CheckStatus(url) { try{ XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP") XMLHTTP.open("HEAD",url,false) XMLHTTP.send() ...
js判断url是否有效的两种方法
12-12
方法一:(仅适用于ie) 代码如下:function CheckStatus(url)        {            XMLHTTP = new ActiveXObject(“Microsoft.XMLHTTP”)            XMLHTTP.open(“HEAD”,url,false)            XMLHTTP.send()            return XMLHTTP.status==200        }        function NetPing()        {              return CheckStatus(“//ww
js 判断指定的url是否有效（能访问
热门推荐
milijiangjun的博客
11-10 1万+
最佳答案 可以自己构造一个方法来判断。利用jquery的ajax强求返回请求结果这个"特点",如果这个url不存在，ajax请求会返回404.然后判断返回的状态码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
js判断请求的url是否可访问,支持跨域判断的实现方法
01-19
meta name=keywords content=js判断URL是否可访问 /> <title>js判断URL是否可访问</title> </head> <body> 检验的url地址： <input type=text style=width:600px;height:30px
原生JS实现加入收藏夹的代码
10-26
原生JS实现收藏夹功能无需依赖任何库或框架，只需利用浏览器提供的API即可。 首先，我们需要了解不同浏览器对收藏夹操作的支持方式。主要分为两种情况：IE（Internet Explorer）和其他基于Webkit内核的浏览器（如...
JS实现点击网页判断是否安装app并打开否则跳转app store
01-19
但往往我们都是直接给推广图片加了一个下载链接（App Store中的）。所以咱们来模拟一下用户的操作步骤： 1、用户第一次访问宣传页面 a、点击Banner，进入到APP Store中对应的APP下载页 b、APP下载页中提示：安装；...
PHP判断远程url是否有效的几种方法小结
01-20
使用PHP解决 使用file_get_contents函数，不过优缺点如果url无法访问，会出现终止程序问题 使用curl返回，然后判断是否正确执行 使用get_headers函数，根据HTTP返回值查看是否有200 使用js解决： 使用原生的js函数...
js 检验URL链接是否有效
高先生的猫
05-26 1947
function getUrlState(URL) { var xmlhttp = new ActiveXObject("microsoft.xmlhttp"); xmlhttp.Open("GET", URL, false); try { xmlhttp.Send(); } catch (e) { } finally { var result = xmlhttp.responseText; if (result) { if (xmlhttp.Sta.
通过Js脚本来判断目标站点是否能打开!
能看代码的CrackLibby
01-20 2160
原：http://www.cnblogs.com/ori8/archive/2009/05/22/1486915.html function getUrl(URL) { var xmlhttp = new ActiveXObject("microsoft.xmlhttp"); xmlhttp.Open("GET",URL, false); try {
js判断远程链接是否有效
hellomy的专栏
09-15 7302
<br />最近在研究javascript，找到了这个老问题。我查了以前的贴子都说是用XMLHTTP请求一次来确认链接的文件是否存在。 　　但是XMLHTTP的测试方式存在有巨大的代价，因为XMLHTTP的请求必须将被请求的文件下载完毕后才能返回结果。如果要测试的连接是一个比较大的文件(如：1M或100M以上的东西)的话，就会需要大量的内存和时间来等待，这个对于只是想知道它存不存在的目的来说，代价太大了。<br />　　我曾想过用XMLHTTP来请求，然后链接成功后主动断开请求，不过似乎XMLHTTP没有这
js判断图片链接是否有效
weixin_45173576的博客
03-07 534
=。= function checkImgExists(imgurl) { return new Promise(function(resolve, reject) { var ImgObj = new Image(); ImgObj.src = imgurl; ImgObj.onload = function(res) { resolve(res); } ImgObj.onerror = fun
js 判断图片 url 地址是否有效，两种方式一起使用完美解决！
u014206461的博客
07-11 9557
话不多说，经过各种方式，各种度娘最后终于找到最期望的了！ //判断图片是否存在 function is_img_url(imgurl) { return new Promise(function(resolve, reject) { var ImgObj = new Image(); //判断图片是否存在 ImgObj.src = imgurl; ImgObj.onload = function(res) { resolve(r
js怎样判断图片链接是否有效
极客开发者的博客
08-03 4434
js怎样判断图片链接是否有效 要判断图片链接是否有效，我们首先创建一个Image对象，然后把链接设置在Image对象上，如果能正常加载，则代表链接有效。因为图片是异步加载的，所以我们需要Promise来处理。创建一个处理函数，如下代码： function checkImgExists(imgurl) { return new Promise(function(resolve, reject) { var ImgObj = new Image() ImgObj.src =
js检测链接(URL)是否有效
aoqie4665的博客
12-14 763
前言 　　在线上找了好多都不适用，自己瞎倒腾了一下，希望能帮到大家！话不多说，下面是解决方案： 1、引用jq库 2、　　 $.ajax({ type:'get', url: "链接", dataType: 'jsonp', timeout: 1000, complete: function (res) { if (res.status...
原生js如何判断元素是否存在某个类名
最新发布
09-02
在原生 JavaScript 中，可以使用 `classList` 属性来判断一个元素是否存在某个类名。 `classList` 是一个只读属性，返回一个元素的类名集合。它提供了一系列方法来操作元素的类名，其中包括 `contains()` 方法用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知勤者笔记

给点吧，没动力了！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值