Bir web sayfasının belirli bir bölümüne bağlantı vermek

Kontrol etmediğim başka bir web sitesinde uzun bir web sayfasının bir kısmına nasıl bağlantı oluşturabilirim?

Bağlantımın sonunda #partofpage'in bir varyantını kullanabileceğini düşündüm. Herhangi bir öneri?

Sadece ekleme Bir #kimliğine ardından <a>(a gibi veya diğer HTML etiketine etiketinin <section>size ulaşmak için çalıştığınızı). Örneğin, bu HTML'deki başlığa bağlanmaya çalışıyorsanız:

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

Bağlantıyı kullanabilirsiniz <a href="http://url.to.site/index.html#target">Link</a>.

Aşağıdaki biçimi kullanarak bir "atlama bağlantısı" oluşturun:

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

Çapa, o sayfada bağlantı vermek istediğiniz öğenin kimliğidir. Bağlanmak istediğiniz öğenin kimliğini bulmak için tarayıcı geliştirme araçlarını kullanın / kaynağı görüntüleyin.

Öğenin bir kimliği yoksa ve bu siteyi kontrol etmiyorsanız, bunu yapamazsınız.

Bu, yalnızca o site sayfada çapa bildirmişse mümkündür. Bir etikete bir ad veya kimlik özelliği verilerek yapılır , bu nedenle bağlantı kurmak istediğiniz yere yakın olanlardan herhangi birini arayın.

Ve sonra sözdizimi şöyle olur

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

Hedef sayfanın aynı etki alanında olması (yani , sayfanızla aynı orijini paylaşması) ve yeni sekmelerin (1) oluşturulmasını önemsemiyorsanız, (ab) bazı JavaScript kullanabilirsiniz :

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

Önemsiz şeyler:

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

Şu anda deneyebileceğiniz bu tür 'istismarın' çalışma örneği şunlar olabilir:

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

Bunu konum çubuğuna girerseniz (Chrome'un javascript:panodan yapıştırıldığında öneki kaldırdığını unutmayın ) veya hrefbu sayfadaki herhangi bir bağlantının değeri yaparsanız (Geliştirici Araçlarını kullanarak) ve tıklarsanız, başka bir (yinelenen) SO soru sayfası açılır. altbilgi ve altbilgi kırmızıya boyanmıştır. (Gecikme, ajax yüklü içeriğin yüklemeden sonra altbilgiyi aşağı itmesi için bir geçici çözüm olarak eklendi.)

Notlar

• Mevcut Chrome ve Firefox'ta test edilmiştir, genellikle tanımlanmış standart davranışa dayandığından çalışmalıdır.
• SO'da etkileşimli pasajda gösterilemez, çünkü bunlar sayfadan kaynak bakımından izole edilmiştir.
• MDN: Window.open ()
• (1) olayı window.open(url,'_self')bozuyor gibi görünüyor load; temelde window.opennormal bir a href=""tıklama gezintisi gibi davranmasını sağlar ; henüz araştırmadım.

İlk hedef, HTML kodunda veya bağlanmaya çalıştığınız krom geliştirici araçlarında bulunan BlockID'yi ifade eder. Her kod farklıdır ve başvurmaya çalıştığınız kimliği bulmak için biraz araştırma yapmanız gerekecektir. div class="page-container drawer-page-content" id"PageContainer"Not gibi görünmelidir ki, bu tek bir metin veya resim değil, referans verilen tüm bölüm için formattır. Bunu yapmak için aynı kod parçasını bulmanız, ancak hedef bloğunuzla ilgili olmanız gerekir. Örneğin dv id="your-block-id"Neyse, ben sadece bu konuyu okuyordum ve aklıma bir fikir geldi, eğer bir Shopify kullanıcısıysanız ve bunu yapmak istiyorsanız, belirtilenle hemen hemen aynı şey. Ama yerine

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

Koyardın

> http://storedomain.com/target

Örneğin, ana sayfamda bir haber bülteni kaydına ve alışveriş bloklarına giden bağlantıların bulunduğu bir sorumluluk reddi sayfası oluşturuyorum, böylece köprüm https://mystore-classifier.com/#shopify-section-1528945200235için ekliyorum. Lütfen, sınıflandırıcının dahili kullanımım için olduğunu ve sizin için geçerli olmadığını unutmayın. Bu sadece mağazalarımı takip edebilmem için. Ana sayfanız dışında bir şeye bağlantı vermek istiyorsanız,

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

Umarım birisi bunu yararlı bulmuştur, eğer açıklamamda bir sorun varsa lütfen bana bildirin, çünkü ben bir HTML programcısı değilim, dilim C #!

Yaklaşan Chrome "Metne kaydır" özelliği tam olarak aradığınız şey ...

https://github.com/bokand/ScrollToTextFragment

Temel #targetText=olarak URL'nin sonuna eklersiniz ve tarayıcı hedef metne kayar ve sayfa yüklendikten sonra onu vurgular.

Masamda çalışan Chrome sürümünde, ancak şu anda manuel olarak etkinleştirilmesi gerekiyor. Muhtemelen yakında Chrome sürümlerinde varsayılan olarak etkinleştirilecek ve diğer tarayıcılar bunu takip edecek, bu nedenle bağlantılarınıza şimdi eklemeye başlamak için Tamam ve o zaman çalışmaya başlayacaktır.