نمایش 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;
}
ارسال نظر