एक वेब पेज के विशिष्ट भाग से लिंक करना


95

मैं किसी अन्य वेबसाइट पर लंबे वेबपेज के एक भाग का लिंक कैसे बना सकता हूं जिसे मैं नियंत्रित नहीं करता हूं?

मुझे लगा कि आप मेरे लिंक के अंत में #partofpage के एक संस्करण का उपयोग कर सकते हैं। कोई सुझाव?


1
संभावित डुप्लिकेट मैं किसी पृष्ठ के भाग
क्वेंटिन

उत्तर उपयोग के इस भाग को लिंक करने के लिए नीचे दिए गए लिंक, stackoverflow.com/questions/15481911/…
Ruturaj Bisure

पेज के इस भाग को लिंक करने के लिए नीचे दिए लिंक, stackoverflow.com/questions/15481911/…
Ruturaj Bisure

जवाबों:


83

केवल #उस <a>टैग की आईडी (या अन्य HTML टैग की तरह <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>


4
क्या होगा अगर उस आईडी का कई बार उपयोग किया जाए? मैं एक एमएस साइट में भाग गया idजिसमें id="in-closing">Some string</id>कई बार उपयोग किया गया जहां Some stringएक दो बार एक नया स्ट्रिंग बन गया।
kayleeFrye_onDeck

5
@kayleeFrye_onDeck यदि आपका HTML एक से अधिक है तो अमान्य है id। परिभाषा के अनुसार idउस टैग के लिए अद्वितीय होने का मतलब है
Kolob Canyon

1
स्पष्ट करने के लिए धन्यवाद, @KolobCanyon! :)
kayleeFrye_onDeck

वहाँ एक वर्ग है कि केवल एक बार उपयोग किया जाता है के साथ ऐसा करने का एक तरीका है?
चगाई फ्राइडलैंडर

हो सकता है कि मैं सिर्फ भोला था, लेकिन जब मैंने गलती से www.site.com/page/#targetयह विफल कर दिया। सुनिश्चित करें कि आपके पास /url के अंत में नहीं है ।
नूह

31

निम्नलिखित प्रारूप का उपयोग करके "जंप लिंक" बनाएं:

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

जहाँ एंकर उस पृष्ठ पर लिंक करने की इच्छा रखने वाले तत्व की आईडी है। जिस तत्व को आप लिंक करना चाहते हैं, उसकी आईडी खोजने के लिए ब्राउज़र डेवलपमेंट टूल्स / व्यू सोर्स का उपयोग करें।

यदि तत्व में कोई id नहीं है और आप उस साइट को नियंत्रित नहीं करते हैं तो आप ऐसा नहीं कर सकते।


क्या होगा यदि वेबपेज के विशिष्ट भाग में कोई आईडी नहीं है?
अजयसिंहनेगी

फिर आपको एलिमेंट को एलिमेंट में जोड़ना होगा
काउल्स

1
क्या मैं इंटरनेट पर एक वेब पेज पर एक टैग को जोड़ सकता हूं?
ajaysinghnegi

2
नहीं, यदि आप इसे किसी अन्य वेबसाइट पर करना चाहते हैं, तो आप जिस हिस्से को स्क्रॉल करना चाहते हैं, उसे स्क्रॉल करने के लिए एक कस्टम JS बुकमार्कलेट बनाने का प्रयास कर सकते हैं। यदि आईडी सेटअप नहीं हैं, तो आप लंगर लिंक काम नहीं कर सकते।
काउल्स

क्या आप उस चीज़ के लिए लिंक कर सकते हैं जिसे आपने ऊपर निर्दिष्ट किया है? मैंने पहले उस तरह का कुछ भी नहीं किया है।
अजयसिंहनेगी

10

यह तभी संभव है जब उस साइट ने पृष्ठ में एंकर घोषित किया हो। यह एक टैग या आईडी विशेषता देकर किया जाता है , इसलिए आप जहां से लिंक करना चाहते हैं, उनमें से किसी को भी देखें।

और तब वाक्य रचना होगी

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

nameविशेषता केवल पर समर्थित है <a>इस के लिए तत्व है, और यह एचटीएमएल 5 में अप्रचलित है
क्वेंटिन

यह मेरे लिए तत्व पर बहुत कम ध्यान केंद्रित कर रहा है। क्या किसी के साथ भी ऐसा ही हुआ है?
कोलोब कैन्यन

8

यदि लक्ष्य पृष्ठ एक ही डोमेन पर है (यानी आपके पृष्ठ के साथ एक ही मूल साझा करता है ) और आप नए टैब (1) का निर्माण नहीं करते हैं, तो आप कुछ ( जावास्क्रिप्ट ) जावास्क्रिप्ट का उपयोग कर सकते हैं :

<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 प्रश्न पृष्ठ स्क्रॉल करना होगा पाद और पाद लेख लाल रंग का है। (विलंब को लोड के बाद नीचे फ़्यूज़र पुश करने वाली अजाक्स-लोड की गई सामग्री के लिए एक समाधान के रूप में जोड़ा गया।)

टिप्पणियाँ

  • वर्तमान क्रोम और फ़ायरफ़ॉक्स में परीक्षण किया गया है, आम तौर पर काम करना चाहिए क्योंकि यह परिभाषित मानक व्यवहार पर आधारित है।
  • एसओ में यहां इंटरएक्टिव स्निपेट में चित्रित नहीं किया जा सकता है, क्योंकि वे पृष्ठ मूल-वार से पृथक हैं।
  • MDN: Window.open ()
  • (१) घटना को window.open(url,'_self')तोड़ता हुआ प्रतीत होता है load; मूल रूप से window.openव्यवहार को सामान्य a href=""क्लिक नेविगेशन की तरह बनाता है ; अभी तक अधिक शोध नहीं किया है।

हुह यह नीचे तक स्क्रॉल नहीं किया और नीचे लाल नहीं है
जॉन डी

1
... और न ही इसने नई विंडो खोली, मुझे लगता है। शायद सबसे अधिक तथ्य यह है कि, javascript:यूआरएलबार में टाइप किए गए लिंक का निष्पादन डिफ़ॉल्ट सेटिंग के साथ "सेल्फ-एक्सएसएस" रोकथाम के रूप में अब ज्यादातर ब्राउज़रों में काम नहीं करता है। लेकिन आप इसे वेब डेवलपर्स कंसोल में आज़मा सकते हैं, जहां इसे अच्छी तरह से काम करना चाहिए।
myf

क्या कोई इसे संपादित कर सकता है और इसका उपयोग करना आसान बना सकता है? मैं एक जावास्क्रिप्ट विशेषज्ञ नहीं हूं और समझ नहीं पा रहा हूं कि क्या करना है
चागई फ्रीडलैंडर

3

पहले बंद लक्ष्य HTML कोड या क्रोम डेवलपर डेवलपर टूल में पाया गया ब्लॉकडिस्क को संदर्भित करता है जिसे आप लिंक करने का प्रयास कर रहे हैं। प्रत्येक कोड अलग है और आपको उस आईडी को खोजने के लिए कुछ खुदाई करने की आवश्यकता होगी जिसे आप संदर्भ देने की कोशिश कर रहे हैं। यह 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 # है!


3

आगामी क्रोम "स्क्रॉल टू टेक्स्ट" फीचर ठीक वही है जो आप ढूंढ रहे हैं ...।

https://github.com/bokand/ScrollToTextFragment

आप मूल रूप #targetText=से URL के अंत में जोड़ते हैं और ब्राउज़र लक्ष्य पाठ पर स्क्रॉल करेगा और पृष्ठ लोड होने के बाद इसे उजागर करेगा।

यह क्रोम के संस्करण में है जो मेरे डेस्क पर चल रहा है, लेकिन वर्तमान में इसे मैन्युअल रूप से सक्षम होना चाहिए। संभवत: यह जल्द ही क्रोम के निर्माण में डिफ़ॉल्ट रूप से सक्षम हो जाएगा और अन्य ब्राउज़र का पालन करेंगे, इसलिए अब आपके लिंक में जोड़ना शुरू करना ठीक है और यह तब काम करना शुरू कर देगा।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.