Hiển thị widget ở 1 trang bất kì dựa vào link liên kết

     Trước kia mình có hướng dẫn nhiều cách để ẩn hoặc hiện 1 widget nào đó, hôm nay mình sẽ hướng dẫn 1 cách khác để hiển thị 1 widget. Đó là dựa vào link liên kết của trang đó. Ví dụ ta có link http://www.domain.com/view.html thì widget sẽ không hiển thị, khi link liên kết là http://www.domain.com/view.html?p=test1 thì nội dung widget đó sẽ hiển thị, và nâng cao 1 chút thì khi link sẽ là http://www.domain.com/view.html?p=test2 thì nội dung widget đó sẽ được hiển thị khác đi. Và nếu các bạn để ý thì thủ thuật này cũng tương tự với 1 thủ thuật mà mình đã có giới thiệu rồi, đó là thủ thuật hiển thị nhiều iframe trên cùng 1 trang.

DEMO

Trên trang DEMO, nếu bạn truy cập từ link

http://data.fandung.com/blog/demo/sd-widet/index.html

thì nôi dung sẽ không có gì, hay nói cách khác widget đã được ẩn. còn nếu bạn truy cập vào demo từ 1 trong 3 liên kết bên dứơi thì bạn sẽ các kết quả khác nhau.

http://data.fandung.com/blog/demo/sd-widet/index.html?p=gioithieu http://data.fandung.com/blog/demo/sd-widet/index.html?p=thongbao
http://data.fandung.com/blog/demo/sd-widet/index.html?p=thongke

* Sau đây là các bước thực hiện :
- Tạo 1 widget HTML/jaascript rồi dán code bên dưới vào

<script type='text/javascript'>
<!--
String.prototype.GetValue= function(para) {
  var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
  var r = this.substr(this.indexOf("\?")+1).match(reg);
  if (r!=null) return unescape(r[2]); return null;
}
var str = location.href;
var p = str.GetValue("p");
//-->

if (p=="thongbao") {
document.write("<div id=\"wg-sh\"><h3>Thông Báo<\/h3><p>Hộp thông báo này sẽ hiển thị khi trong link liên kết của trang hiện hành có chứa giá trị <span style=\"color:#f00;\">p=thongbao</span></p><\/div>");
}
if (p=="thongke") {
document.write("Nội dung của widget khi giá trị p=thongke");
}
if (p=="gioithieu") {
document.write("Nội dung của widget khi giá trị p=thongke");
}
</script>

- biến p bạn có thể thay bằng biến nào tùy ý bạn, ví dụ test.html?page=1 chẳng hạn.
- Nội dung widget của bạn sẽ là nội dung trong trong lệnh document.write.
- Nếu chỉ muốn nội dung của widget là duy nhất thì các bạn dùng 1 lệnh if (p==…) {…}
- Tất nhiên ở đây mình chỉ giới thiệu thủ thuật chính, còn nếu muốn làm đẹp cho widget thì các bạn có thể tùy chỉnh thêm với CSS.
Chúc các bạn thành công.
(FD) 

Các bài liên quan:

1. Hiển thị widget chỉ ở trang chủ hoặc trang riêng biệt 

2.  Chỉ cho phép widget hiển thị ở 1 trang Label nhất định