نمایش URL مطلق بدون هشتگ و کوئری با جاوا اسکریپت

نمایش URL مطلق بدون هشتگ و کوئری با جاوا اسکریپت

URL مطلق بدون هشتگ – معمولا اکثر لینک هایی که وجود دارند دارای کوئری و هشتگ جهت اسکرول به یک المنت خاص در صفحه وب می باشد .

گاهی اوقات نیاز است که لینک را بدون کوئری و هشتگ داشته باشیم مثلا برای ذخیره لینک در دیتابیس .

دموی پایین برای درک بهتر کارایی برنامه :


دموی برنامه


صفحه index.html

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>
    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
        <input type="url" id="url1" placeholder="لینک"><br><br>
		<input type="button" name="submit" id="submit" value="ثبت">  
    </div>  
    <script src="static/js/app.js"></script>
</body>
</html>


اسکریپت app.js

const url = document.getElementById('url1');
const submit = document.getElementById('submit');
let result = null;
const container = document.getElementsByClassName('container')[0];

submit.addEventListener("click" , function(event){
	const urlData = new URL(url.value);
	const absoluteURL = urlData.origin;
	console.log(absoluteURL);
	
	if(!result){
		result = `<div id="result"></div>`;
		result = new DOMParser().parseFromString(result, "text/html");
		container.appendChild(result.getElementById('result'));
		result = document.getElementById('result');
	}
		
	result.innerHTML = absoluteURL;
});


استایل با main.css

#result{
	background-color: green;
	color: white;
	margin-top: 25px;
	padding: 15px;
}


دانلود سورس لینک مطلق با js

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

انجام انواع پروژه های وب


( فروشگاهی ، خبری ، رزرواسیون ، وردپرس ، حل مشکلات وردپرسی )

شماره تماس و واتساپ : 09398554859