فصل نهم: Redirect کردن صفحه وب، دیالوگ باکس در اکما اسکریپت
Redirect کردن یک صفحه وب
Redirect یک روش برای ارسال کاربران و موتور جستجو به یک مکان متفاوت از url ایی است که آنها در ابتدا درخواست داده بودند.
Redirect کردن صفحه روشی است که به طور خودکار یک صفحه وب را به صفحه دیگر هدایت می کند. صفحه Redirect شده بیشتر اوقات در همان وب سایت است و گاهی در یک وب سایت دیگر و یا سرور دیگر قرار دارد.
Redirect کردن صفحه در جاوا اسکریپت
window.location و window.location.href
در جاوا اسکریپت روش های مختلفی برای Redirect کردن یک صفحه به صفحه دیگر وجود دارد. تقریباً همه روش ها به آبجکت window.location مربوط هستند که یک پروپرتی مربوط به آبجکت window است. این پروپرتی می تواند آدرس url جاری را دریافت و مرورگر را به صفحه جدید هدایت کند. هر دوی اینها رفتار یکسانی دارند. window.location یک آبجکت را بر میگرداند. اگر .href تنظیم نشده باشد، window.location از مقدار پیش فرض برای تغییر پارامتر .href استفاده می کند.
مثال
<!DOCTYPE html>
<html>
<head>
<script>
function newLocation() {
window.location = "http://www.xyz.com";
}
</script>
</head>
<body>
<input type = "button" value = "Go to new location" onclick = "newLocation()">
</body>
</html>
Location.replace()
یکی دیگر از متدهایی که به طور مکرر استفاده می شود، متد replace() از آبجکت window.location است و این متد سند جاری را با یک سند جدید جایگزین می کند. از متد replace() میتوانید یک آدرس url جدید به متد replace() پاس بدهید و این متد شما را به آدرس جدید هدایت می کند.
نحوه تعریف آن مطابق زیر است:
window.location.replace("http://www.abc.com
Location.assign()
متد location.assign() یک سند جدید را در پنجره مرورگر بارگذاری می کند. نحوه تعریف آن مطابق زیر است:
window.location.assign("http://www.abc.org");
assign() در برابر replace()
فرق بین متد assing() و replace() در این است که متد location.replace() آدرس url جاری را از تاریخچه صفحه پاک می کند، و با زدن دکمه back نمی توانید به صفحه اصلی برگردید و از دکمه back در این مورد نمی توانید استفاده کنید. اگر میخواهید از این وضعیت جلوگیری کنید، باید از متد location.assign() استفاده کنید، چون این متد یک صفحه جدید را در مرورگر بارگذاری می کند.
location.reload()
متد location.reload() صفحه وب جاری را در مرورگر reload (بارگذاری مجدد) می کند.
سینتکس آن مطابق زیر است:
window.location.reload("http://www.yahoo.com");
Window.navigate()
متد window.navigate() مشابه نسبت دادن یک مقدار به پروپرتی window.location.href است. چون این متد فقط در مرورگر اینترنت اکسپلورر (IE) کار می کند، در صورتی که مشغول توسعه یک برنامه مستقل از مرورگر هستید، از این متد استفاده نکنید.
سینتکس آن مطابق زیر است:
window.navigate("http://www.abc.com");
Redirect کردن و بهینه سازی موتور جستجو (SEO)
اگر می خواهید به موتور جستجو درباره redirect کردن صفحات اطلاع دهید، باید rel=”canonical” را در قسمت تگ mata و در قسمت head صفحه قرار دهید. به این خاطر که موتورهای جستجو کدهای جاوا اسکریپت را برای تشخیص عمل redirect یک صفحه آنالیز نمی کند.
سینتکس آن مطابق زیر است:
<link rel = "canonical" href = "http://abc.com/" />
دیالوگ باکس
جاوا اسکریپت از سه نوع دیالوگ باکس پشتیبانی می کند. این دیالوگ باکس ها می توانند بین ایجاد یک هشدار یا دریافت یک ورودی از کاربر، یا گرفتن تایید از هر ورودی کاربر، استفاده شود.
دیالوگ باکس alert
از دیالوگ باکس alert برای نمایش یک پیام به کاربر استفاده می شود. برای مثال اگر یک فیلد ورودی نیاز به ورود داده داشت اما کاربر این فیلد را خالی گذاشت، شما می توانید بعد از اعتبار سنجی، یک پیام به کاربر ارسال کنید. دیالوگ alert فقط شامل یک دکمه به نام ok دارد.
مثال
<html>
<head>
<script type = "text/javascript">
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form>
</body>
</html>
دیالوگ باکس confirm
دیالوگ confirm معمولاً برای گرفتن اجازه از کاربر برای یک اقدام خاص، استفاده می شود و این دیالوگ دو دکمه به نام های ok و cancel را نمایش می دهند.
اگر کاربر روی دکمه ok کلیک کند، متد confirm() مقدار true را بر می گرداند.
اگر کاربر بر روی دکمه cancel کلیک کند، متد confirm() مقدار false را بر میگرداند. شما می توانید از این دیالوگ مطابق زیر استفاده کنید.
مثال
<html>
<head>
<script type = "text/javascript">
function getConfirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
document.write ("User wants to continue!");
return true;
} else {
Document.write ("User does not want to continue!");
return false;
}
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>
دیالوگ باکس prompt
دیالوگ prompt وقتی استفاده می شود که شما می خواهید یک ورودی را از کاربر بگیرید. بنابراین این دیالوگ اجازه می دهد تا شما با کاربران تعامل داشته باشید.
کاربران باید فیلد ورودی را پر کرده و سپس روی دکمه ok کلیک کنند.
این دیالوگ با استفاده از یک متد به نام prompt() نمایش داده می شود و دو پارامتر می گیرد:
- برچسب (label): یک برچسب برای نمایش متن کنار textbox استفاده می شود.
- یک مقدار پیش فرض رشته ای برای نمایش در textbox .
این دیالوگ دو دکمه دارد: ok و cancel .
اگر کاربر روی دکمه ok کلیک کند، متد prompt() مقدار وارد شده در textbox را بر می گرداند. اگر کاربر روی دکمه cancel کلیک کرد، متد prompt() مقدار null را بر می گرداند.
مثال
<html>
<head>
<script type = "text/javascript">
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>
پرینت گرفتن از صفحه
گاهی اوقات می خواهید یک دکمه روی صفحه وب تان قرار داده و با کلیک روی آن، محتوای صفحه در یک پرینتر واقعی پرینت گرفته شود.
جاوا اسکریپت به شما این امکان را می دهد که این قابلیت را توسط تابع print از آبجکت window پیاده کنید.
تابع window.print() صفحه وب جاری را هنگامی که به طور کامل بارگذاری شد، پرینت می گیرد.
می توانید این تابع را مستقیما با استفاده از رویداد onclick که در زیر نشان داده شده، فراخوانی کنید.
مثال
<html>
<body>
<form>
<input type = "button" value = "Print" onclick = "window.print()"/>
</form>
</body>
</html>
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.