Cách đặt thẻ dữ liệu liên kết trong thuộc tính 'onclick'

Trong một bài viết cũ mình đã đề cập về cách sử dụng lệnh expr đọc thẻ dữ liệu trong Blogger, bài hôm nay mình mở rộng thêm một chút về cách đặt thẻ dữ liệu liên kết trong thuộc tính onclick. Cụ thể, khi bạn đặt liên kết trong thuộc tính "onclick", khi nhấp vào phần tử đó trang sẽ chuyển hướng đến liên kết đã nhấp vào.

Thẻ liên kết đăng nhận xét trong thuộc tính onlick

Vấn đề này tưởng đơn giản nhưng nếu làm sai sẽ dẫn đến lỗi không hiền thị được tiện ích widget do không đọc được thẻ dữ liệu bên trong.

Lấy một ví dụ với thẻ liên kiết đăng nhận xét <b:eval expr='data:post.commentsUrl'/>, mình sẽ đặt liên kết này trong thuộc tính "onclick" với các trường hợp dưới đây:

Nếu mình chỉ đơn giản đặt nó trong thuộc tính "href", sẽ có dạng sau:

<b:if cond='data:post.allowComments'>

  <a expr:href='data:post.commentsUrl' expr:title='data:messages.postAComment'><data:post.numberOfComments/> <data:messages.comments/></a>

</b:if>

Khi trích xuất HTML, nếu bài cho phép nhận xét thì liên kết hiển thị như sau:

<a href="https://www.thietkeblogspot.com/2020/02/cach-su-dung-lenh-expr-doc-the-du-lieu-trong-blogger.html#comments" title="Đăng nhận xét">0 Nhận xét</a>

Bây giờ mình không đặt liên kết nhận xét trong thuộc tính "href" nữa, thay vào đó mình đặt nó trong thuộc tính "onclick"

<b:if cond='data:post.allowComments'>

  <a href='javascript:void(0)' expr:onclick='"location.href=" + data:post.commentsUrl'>

    <data:post.numberOfComments/> <data:messages.comments/>

  </a>

</b:if>

Khi trích xuất HTML, nếu bài cho phép nhận xét thì liên kết hiển thị như sau:

<a href="'javascript:void(0)" onlick="location.href=https://www.thietkeblogspot.com/2020/02/cach-su-dung-lenh-expr-doc-the-du-lieu-trong-blogger.html#comments" title="Đăng nhận xét">0 Nhận xét</a>

Thế nhưng nó chỉ đúng với thẻ liên kết "a" mà thôi, còn với nhửng thẻ khác như thẻ "span", thẻ "div",.v.v.., khi thêm như vậy về bản chất không sai nhưng khi click trang lại không chuyển hướng được vì thiếu ký tự đặc biệt: "&apos;" hoặc "&#39;". Hai ký tự này đặt trong xml khi trích xuất HTML ra ký tự "'" nha các bạn.

Để giải quyết vấn đề, chỉ cần thêm ký tự đặc biệt: "&apos;" hoặc "&#39;" cùng với liên kết

Sử dụng ký tự "&apos;"

<b:if cond='data:post.allowComments'>

  <span expr:onclick='"location.href=&apos;" + data:post.commentsUrl + "&apos;"' expr:title='data:messages.postAComment'>

    <data:post.numberOfComments/> <data:messages.comments/>

  </span>

</b:if>

Sử dụng ký tự "&#39;"

<b:if cond='data:post.allowComments'>

  <span expr:onclick='"location.href=&#39;" + data:post.commentsUrl + "&#39;"' expr:title='data:messages.postAComment'>

    <data:post.numberOfComments/> <data:messages.comments/>

  </span>

</b:if>

Cuối cùng bạn cần nắm chắc về cách sử dụng lệnh expr đọc thẻ dữ liệu trong Blogger, cấu trúc như sau:

expr:<thuộc tính>='"<ký tự đặc biệt"> + <thẻ dữ liệu>'

Cụ thể, cứ cái nào không phải thẻ dữ liệu phải được đặt trong "", nếu kết hợp với thẻ dữ liệu thêm dấu "+"

Bài tham khảo: Các thẻ dữ liệu hiển thị văn bản trong template layout version 3