Liên kết đến một phần cụ thể của trang web

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?

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

Chỉ cần thêm một thẻ #theo sau là ID của <a>thẻ (hoặc thẻ HTML khác, như a <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>.

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

Nơi neo là id của phần tử 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 đó.

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

Và sau đó cú pháp sẽ là

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

Trong trường hợp trang đích nằm trên cùng một miền (nghĩa là có cùng nguồn gốc với trang của bạn) và bạn không ngại tạo 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>

Thông tin bên lề:

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()
}

Ví dụ làm việc của 'khai thác' như vậy mà 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)})})('/programming/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')

Nếu bạn nhập điều này vào thanh vị trí (lưu ý rằng Chrome sẽ xóa javascript:tiền tố khi dán khỏi khay nhớ tạm) hoặc đặt nó thành hrefgiá trị 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 (trùng lặp) khác được cuộn đến chân trang và chân trang sơn màu đỏ. (Độ trễ được thêm vào như một giải pháp thay thế cho nội dung tải ajax đẩy chân trang xuống sau khi tải.)

Ghi chú

• Đã được thử nghiệm trong Chrome và Firefox hiện tại, nói chung sẽ hoạt động vì nó 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 SO, vì chúng được tách biệt với nguồn gốc của trang.
• MDN: Window.open ()
• (1) window.open(url,'_self')dường như đang phá vỡ loadsự kiện; về cơ bản làm cho window.openhoạt động giống như a href=""điều hướng nhấp chuột bình thường ; vẫn chưa nghiên cứu thêm.

Mục tiêu đầu tiên đề cập đến BlockID được tìm thấy trong mã HTML hoặc các công cụ dành cho nhà phát triển chromes mà bạn đang cố gắng liên kết đến. Mỗi mã khác nhau và bạn sẽ cần thực hiện một số thao tác đào để tìm ID mà bạn đang cố gắng tham chiếu. Nó sẽ trông giống như div class="page-container drawer-page-content" id"PageContainer"Lưu ý rằng đây là định dạng cho toàn bộ phần được tham chiếu, không phải một văn bản hoặc hình ảnh riêng lẻ. Để làm điều đó, bạn sẽ cần tìm cùng một đoạn mã nhưng liên quan đến khối mục tiêu của bạn. Ví dụ: dv id="your-block-id"Dù sao thì tôi chỉ đang đọc qua chủ đề này và một ý tưởng nảy ra trong đầu tôi, nếu bạn là người dùng Shopify và muốn làm điều này, thì điều đó cũng giống như đã nói. Nhưng thay vì

> http://url.to.site/index.html#target

Bạn sẽ đặt

> http://storedomain.com/target

Ví dụ: tôi đang thiết lập trang tuyên bố từ chối trách nhiệm với các liên kết dẫn đến đăng ký nhận bản tin và các khối mua sắm trên trang chủ của mình, vì vậy tôi chèn https://mystore-classifier.com/#shopify-section-1528945200235siêu liên kết của mình. Xin lưu ý rằng -classifier là để sử dụng nội bộ của tôi và không áp dụng cho bạn. Điều này chỉ để tôi có thể theo dõi các cửa hàng của mình. Nếu bạn muốn liên kết đến một cái gì đó khác với trang chủ của bạn, bạn sẽ đặt

> http://mystore-classifier.com/pagename/#BlockID

Tôi hy vọng ai đó thấy điều này hữu ích, nếu có điều gì sai trong lời giải thích của tôi, vui lòng cho tôi biết vì tôi không phải là lập trình viên HTML, ngôn ngữ của tôi là C #!

Tính năng "Cuộn đến văn bản" sắp ra mắt của Chrome chính là thứ bạn đang tìm kiếm ....

https://github.com/bokand/ScrollToTextFragment

Về cơ bản, bạn thêm #targetText=vào cuối URL và trình duyệt sẽ cuộn đến văn bản đích và đánh dấu nó sau khi trang được tải.

Nó nằm trong phiên bản Chrome đang chạy trên bàn của tôi, nhưng hiện tại nó phải được bật theo cách thủ công. Có lẽ nó sẽ sớm được bật theo mặc định trong các bản dựng Chrome sản xuất và các trình duyệt khác sẽ làm theo, vì vậy OK để bắt đầu thêm vào các liên kết của bạn ngay bây giờ và sau đó nó sẽ bắt đầu hoạt động.