2013-03-18 36 views
23

Làm cách nào để tạo liên kết đến một phần của trang web dài trên một trang web khác mà tôi không kiểm soát?Liên kết đến một phần cụ thể của trang web

Tôi nghĩ bạn có thể sử dụng biến thể của #partofpage ở cuối liên kết của tôi. Bất kỳ đề xuất?

+0

Bản sao có thể có của [Làm cách nào để liên kết đến một phần của trang? (băm?)] (http://stackoverflow.com/questions/2835140/how-do-i-link-to-part-of-a-page-hash) – Quentin

+0

Để liên kết phần này của câu trả lời, hãy sử dụng liên kết sau, https : //stackoverflow.com/questions/15481911/linking-to-a-specific-part-of-a-web-page –

+0

Để liên kết phần này của việc sử dụng trang sau liên kết, https://stackoverflow.com/questions/15481911/link-to-a-specific-part-of-a-web-page –

Trả lời

26

Chỉ cần thêm # theo sau là ID của thẻ <a> (hoặc thẻ HTML khác, như <section>) mà bạn đang cố gắng truy cập. Ví dụ: nếu bạn đang cố gắng liên kết đến tiêu đề trong HTML này:

<p>This is some content.</p> 
<h2><a id="target">Some Header</a></h2> 
<p>This is some more content.</p> 

Bạn có thể sử dụng liên kết <a href="http://url.to.site/index.html#target">Link</a>.

+1

Cảm ơn các bạn, nó luôn là những điều đơn giản mà bạn quên! – mjmuk

+6

@Quentin cho tôi nghỉ ngơi, tôi đã viết 3 năm trước :) Tôi sẽ cập nhật nó sớm. – APerson

13

Tạo một "liên kết nhảy" bằng cách sử dụng định dạng sau:

http://www.somesite.com/somepage#anchor 

đâu neo là id của phần tử mà bạn muốn liên kết đến trên trang đó. Sử dụng công cụ phát triển trình duyệt/nguồn xem để tìm id của phần tử bạn muốn liên kết đến.

Nếu phần tử không có id và bạn không kiểm soát trang web đó thì bạn không thể làm điều đó.

+0

Cảm ơn các bạn, nó luôn là những điều đơn giản mà bạn quên! – mjmuk

2

Điều đó chỉ có thể xảy ra nếu trang web đó đã khai báo các neo trong trang. Nó được thực hiện bằng cách đưa ra một thẻ name or id attribute, vì vậy, hãy tìm bất kỳ thẻ nào gần với nơi bạn muốn liên kết đến.

Và rồi cú pháp sẽ là

<a href="page.html#anchor">text</a> 
+0

Cảm ơn các bạn, nó luôn là những điều đơn giản mà bạn quên! – mjmuk

+0

Thuộc tính 'name' chỉ được hỗ trợ trên phần tử' 'cho điều này và nó đã lỗi thời trong HTML 5. – Quentin

1

Trong trường hợp trang mục tiêu nằm trên cùng một tên miền (ví dụ cổ phần cùng nguồn gốc với trang của bạn) và bạn không quan tâm việc tạo ra các tab mới (1), bạn có thể (ab) sử dụng một số Javascript:

<a href="javascript:void(window.open('./target.html').onload=function(){this.document.querySelector('p:nth-child(10)').scrollIntoView()})">see tenth paragraph on another page</a>

Trivia:

var w = window.open('some URL of the same origin'); 
w.onload = function(){ 
    // do whatever you want with `this.document`, like 
    this.document.querySelecotor('footer').scrollIntoView() 
} 

dụ làm việc như vậy 'khai thác' bạn có thể thử ngay bây giờ có thể là:

javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('https://stackoverflow.com/questions/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')

Nếu bạn nhập này vào thanh địa chỉ (ghi nhớ rằng Chrome loại bỏ javascript: prefix khi dán từ clipboard) hoặc làm nó là giá trị href của bất kỳ liên kết nào trên trang này (sử dụng Công cụ dành cho nhà phát triển) và nhấp vào nó, bạn sẽ nhận được một trang câu hỏi SO khác (trùng lặp) được cuộn đến chân trang và chân trang được sơn màu đỏ. (Trễ thêm vào như là một cách giải quyết cho nội dung ajax-nạp đẩy chân xuống sau khi tải.)

Ghi chú

  • Tested trong Chrome hiện tại và Firefox, thường phải làm việc kể từ khi nó được dựa trên hành vi tiêu chuẩn xác định.
  • Không thể được minh họa trong đoạn mã tương tác tại đây tại SO, vì chúng được phân tách từ trang gốc.
  • MDN: Window.open()
  • (1) window.open(url,'_self') dường như vi phạm sự kiện load; về cơ bản làm cho window.open hoạt động giống như điều hướng nhấp chuột a href="" bình thường; chưa nghiên cứu thêm.
1

Bạn có thể sử dụng Citebite để liên kết đến vị trí cụ thể của trang web ngay cả khi nó không sử dụng id ở vị trí đó.

Các vấn đề liên quan