การเชื่อมโยงไปยังส่วนใดส่วนหนึ่งของหน้าเว็บ

ฉันจะสร้างลิงก์ไปยังส่วนหนึ่งของหน้าเว็บแบบยาวบนเว็บไซต์อื่นที่ฉันไม่ได้ควบคุมได้อย่างไร

ฉันคิดว่าคุณสามารถใช้ #partofpage รูปแบบหนึ่งที่ท้ายลิงก์ของฉันได้ ข้อเสนอแนะใด ๆ ?

เพียงแค่ต่อท้าย#ตามด้วยรหัสของ<a>แท็ก (หรือแท็ก HTML อื่น ๆ เช่น a <section>) ที่คุณพยายามเข้าถึง ตัวอย่างเช่นหากคุณพยายามเชื่อมโยงไปยังส่วนหัวใน HTML นี้:

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

<a href="http://url.to.site/index.html#target">Link</a>คุณสามารถใช้การเชื่อมโยง

สร้าง "ลิงค์ข้าม" โดยใช้รูปแบบต่อไปนี้:

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

จุดยึดคือ id ขององค์ประกอบที่คุณต้องการเชื่อมโยงในหน้านั้นโดยที่จุดยึด ใช้เครื่องมือพัฒนาเบราว์เซอร์ / ดูซอร์สเพื่อค้นหารหัสขององค์ประกอบที่คุณต้องการเชื่อมโยง

หากองค์ประกอบไม่มีรหัสและคุณไม่ได้ควบคุมไซต์นั้นคุณจะทำไม่ได้

จะเป็นไปได้ก็ต่อเมื่อไซต์นั้นได้ประกาศจุดยึดในหน้า ทำได้โดยตั้งชื่อหรือแอตทริบิวต์ idให้กับแท็กดังนั้นให้มองหาสิ่งที่ใกล้เคียงกับที่ที่คุณต้องการเชื่อมโยง

จากนั้นไวยากรณ์จะเป็น

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

ในกรณีที่หน้าเป้าหมายอยู่ในโดเมนเดียวกัน (เช่นหุ้นที่แหล่งกำเนิดเดียวกันกับหน้าของคุณ) และคุณไม่ทราบการสร้างแท็บใหม่ (1) คุณสามารถ (AB) ใช้บาง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>

เรื่องไม่สำคัญ:

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

ตัวอย่างการทำงานของ 'การหาประโยชน์' ที่คุณสามารถลองได้ในตอนนี้อาจเป็น:

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')

หากคุณป้อนสิ่งนี้ลงในแถบตำแหน่ง (โปรดทราบว่า Chrome จะลบjavascript:คำนำหน้าเมื่อวางจากคลิปบอร์ด) หรือกำหนดให้เป็นhrefค่าของลิงก์ใด ๆ ในหน้านี้ (โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์) และคลิกคุณจะได้รับหน้าคำถาม SO อีก (ซ้ำกัน) เลื่อนไปที่ ส่วนท้ายและส่วนท้ายทาสีแดง (เพิ่มความล่าช้าเป็นวิธีแก้ปัญหาสำหรับเนื้อหาที่โหลด ajax โดยกดส่วนท้ายลงหลังจากโหลด)

หมายเหตุ

• ผ่านการทดสอบใน Chrome และ Firefox ปัจจุบันโดยทั่วไปควรใช้งานได้เนื่องจากเป็นไปตามพฤติกรรมมาตรฐานที่กำหนดไว้
• ไม่สามารถแสดงในตัวอย่างข้อมูลเชิงโต้ตอบที่นี่ที่ SO ได้เนื่องจากแยกออกจากส่วนต้นทางของหน้า
• MDN: Window.open ()
• (1) window.open(url,'_self')ดูเหมือนจะทำลายloadเหตุการณ์; โดยทั่วไปจะทำให้window.openพฤติกรรมเหมือนa href=""การนำทางคลิกปกติ ยังไม่ได้ค้นคว้าเพิ่มเติม

เป้าหมายอันดับแรกหมายถึง BlockID ที่พบในโค้ด HTML หรือเครื่องมือสำหรับนักพัฒนาโครเมียมที่คุณพยายามเชื่อมโยง แต่ละรหัสจะแตกต่างกันและคุณจะต้องทำการขุดเพื่อค้นหา ID ที่คุณพยายามอ้างอิง ควรมีลักษณะดังนี้div class="page-container drawer-page-content" id"PageContainer"โปรดทราบว่านี่คือรูปแบบสำหรับส่วนที่อ้างอิงทั้งหมดไม่ใช่ข้อความหรือรูปภาพแต่ละภาพ ในการทำเช่นนั้นคุณจะต้องหาโค้ดชิ้นเดียวกัน แต่เกี่ยวข้องกับบล็อกเป้าหมายของคุณ ตัวอย่างเช่นdv id="your-block-id"อย่างไรก็ตามฉันเพิ่งอ่านหัวข้อนี้และมีความคิดเกิดขึ้นในใจของฉันหากคุณเป็นผู้ใช้ Shopify และต้องการทำสิ่งนี้ก็เป็นสิ่งเดียวกันกับที่ระบุไว้ แต่แทนที่จะเป็น

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

คุณจะใส่

> http://storedomain.com/target

ตัวอย่างเช่นฉันกำลังตั้งค่าหน้าข้อจำกัดความรับผิดชอบที่มีลิงก์ที่นำไปสู่การสมัครรับจดหมายข่าวและบล็อกการช็อปปิ้งในโฮมเพจของฉันดังนั้นฉันจึงแทรกhttps://mystore-classifier.com/#shopify-section-1528945200235ไฮเปอร์ลิงก์ โปรดทราบว่า -classifier มีไว้สำหรับการใช้งานภายในของฉันและไม่มีผลกับคุณ เพียงเท่านี้ฉันก็สามารถติดตามร้านค้าของฉันได้ หากคุณต้องการเชื่อมโยงไปยังสิ่งอื่นที่ไม่ใช่หน้าแรกของคุณคุณจะใส่

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

ฉันหวังว่าจะมีคนพบว่าสิ่งนี้มีประโยชน์หากมีบางอย่างผิดปกติกับคำอธิบายของฉันโปรดแจ้งให้เราทราบเนื่องจากฉันไม่ใช่โปรแกรมเมอร์ HTML ภาษาของฉันคือ C #!

คุณลักษณะ "เลื่อนไปที่ข้อความ" ของ Chrome ที่กำลังจะมาถึงคือสิ่งที่คุณกำลังมองหา ....

https://github.com/bokand/ScrollToTextFragment

โดยพื้นฐานแล้วคุณจะเพิ่ม#targetText=ที่ท้าย URL และเบราว์เซอร์จะเลื่อนไปที่ข้อความเป้าหมายและไฮไลต์หลังจากโหลดหน้า

อยู่ใน Chrome เวอร์ชันที่ทำงานบนโต๊ะทำงานของฉัน แต่ตอนนี้ต้องเปิดใช้งานด้วยตนเอง ในไม่ช้ามันจะถูกเปิดใช้งานโดยค่าเริ่มต้นใน Chrome รุ่นที่ใช้งานจริงและเบราว์เซอร์อื่น ๆ จะตามมาดังนั้นตกลงที่จะเริ่มเพิ่มลิงก์ของคุณตอนนี้และจะเริ่มทำงาน