मान लें कि मेरे पास एक HTML दस्तावेज़ है जिसके अंदर div है:

div.html

  <div class="thediv">
    <h1>test</h1>
    <p class="insert"></p>
  </div>

index.html से, मैं इसे आयात करता हूं

<link rel="import" href="/path/to/div.html">

अब अगर मैं कंसोल या स्क्रिप्ट में टाइप करता हूं

const div = document.querySelector('.thediv');

div null है, जैसे कि div अभी गायब हो गया है। लेकिन मुझे यकीन है कि तत्व का चयन करने का एक तरीका है क्योंकि कुछ वेबकंपोनेंट्स लाइब्रेरी प्रोग्रामर को अपने स्वयं के कस्टम तत्वों को फ़ाइल द्वारा परिभाषित करने की अनुमति देते हैं।

मैंने बहुत सी चीजों की कोशिश की लेकिन समाधान नहीं मिला। सहायता के लिए धन्यवाद।

अपडेट करें:
यह किसी भी HTML तत्वों के लिए सही है (न कि केवल div)। मैं प्रश्न के लिए सिर्फ एक उदाहरण चुनता हूं।

2
vdegenne 24 सितंबर 2017, 10:55
A <template> सामग्री के साथ ओवरराइड किया गया है। एक बार पृष्ठ प्रस्तुत करने के बाद यह अब और नहीं है। आपको टेम्प्लेट की सामग्री को संबोधित करने की आवश्यकता है, न कि <template> टैग को।
 – 
Koby Douek
24 सितंबर 2017, 10:59
क्या आप उत्तर टिकट बनाने पर विचार कर सकते हैं? मैं इस विचार को बिल्कुल नहीं समझता लेकिन मुझे यकीन है कि यह दिलचस्प जानकारी है। धन्यवाद
 – 
vdegenne
24 सितंबर 2017, 11:00
मेरा प्रश्न प्रत्येक HTML तत्वों पर लागू होता है (न केवल template), मैं सिर्फ एक उदाहरण चुन रहा था।
 – 
vdegenne
24 सितंबर 2017, 11:02
मैंने एक उत्तर लागू किया, आशा है कि यह मदद करता है।
 – 
Koby Douek
24 सितंबर 2017, 11:05
@ T.J.Crowder हाँ, मैं सभी कोड फिर से लिखता हूँ क्योंकि मैंने मूल रूप से template का उपयोग किया था और लोग भ्रमित थे।
 – 
vdegenne
24 सितंबर 2017, 11:22

4 जवाब

आप <link> एलिमेंट पर सेट document को rel एट्रिब्यूट के साथ "import" पर सेट कर सकते हैं, .import एलिमेंट की प्रॉपर्टी <link> का इस्तेमाल कर सकते हैं, यह भी देखें क्या यह जानने का कोई तरीका है कि कोई लिंक/स्क्रिप्ट अभी भी लंबित है या विफल हो गई है, jquery के साथ पूरी html फ़ाइल कैसे जोड़ें

document.querySelector("link[rel=import][href='template1.html']")
.import.querySelector("#template1")
2
guest271314 24 सितंबर 2017, 11:14
धन्यवाद, यह एक समाधान की तरह लगता है, मैं उम्मीद कर रहा था कि प्रत्येक आयात एक सामान्य वस्तु या कुछ में निहित था क्योंकि मान लीजिए कि मुझे एक HTML आयात में एक तत्व querySelector की आवश्यकता है जिसे किसी अन्य HTML आयात से आयात किया गया था, मुझे इसकी आवश्यकता है केवल इसे चुनने के लिए पूरे आयात ट्री को देखें, यह थोड़ा बोझिल है। लेकिन धन्यवाद
 – 
vdegenne
24 सितंबर 2017, 11:25
.import एक document ऑब्जेक्ट का संदर्भ देता है। HTML या अन्य दस्तावेज़ प्रकार की रचना कैसे की जाती है, यह document के लेखक पर छोड़ दिया जाता है।
 – 
guest271314
24 सितंबर 2017, 11:27

समाधान यहां मिला: https://www.html5rocks.com/en/tutorials/webcomponents /आयात/

आयात.एचटीएमएल

<template>
  <h1>Hello World!</h1>
  <!-- Img is not requested until the <template> goes live. -->
  <img src="world.png">
  <script>alert("Executed when the template is activated.");</script>
</template>

Index.html

<head>
  <link rel="import" href="import.html">
</head>
<body>
  <div id="container"></div>
  <script>
    var link = document.querySelector('link[rel="import"]');

    // Clone the <template> in the import.
    var template = link.import.querySelector('template');
    var clone = document.importNode(template.content, true);

    document.querySelector('#container').appendChild(clone);
  </script>
</body>
1
Max Bilbow 24 सितंबर 2017, 11:25
आपके द्वारा संदर्भित लिंक ने मुझे मेरे मामले के लिए उपयुक्त समाधान खोजने में मदद की, बहुत बहुत धन्यवाद
 – 
vdegenne
24 सितंबर 2017, 11:41

मेरे पास मेरे प्रश्न पर 2 अच्छे उत्तर थे और उन्होंने मेरी विशिष्ट समस्या के लिए एक अधिक उपयुक्त समाधान खोजने में मेरी मदद की जो मैं यहां साझा कर रहा हूं।
फिर से मैंने जो हासिल करने की कोशिश की वह था querySelector मुख्य दस्तावेज़ (यानी index.html) से html आयात में परिभाषित एक तत्व।
अगर हम कुछ ऐसा लिखते हैं

<div id="thediv">
  ...
</div>

एचटीएमएल आयात की जड़ में, तत्व मुख्य दस्तावेज़ के मुख्य भाग में शामिल नहीं किया जाएगा (मुझे लगता है कि प्रत्येक दस्तावेज़ का अपना नामस्थान या ऐसा कुछ होता है)।

@guest271314 ने प्राप्त किए गए संसाधन की सामग्री तक पहुंचने के लिए link तत्व की import संपत्ति का उपयोग करने की अनुशंसा की, लेकिन उसी पोस्ट पर मेरी टिप्पणी देखें . मुझे लगता है कि यह वास्तव में साफ नहीं है जब आप उन दस्तावेजों से निपटते हैं जो अन्य दस्तावेजों को आयात करते हैं जो दूसरों को आयात करते हैं...
@MaxBilbow ने template का उपयोग करके एक लिंक और एक उदाहरण खंड प्रदान करने के लिए उसी विधि की सिफारिश की। फिर से यह वास्तव में अच्छा नहीं है जब आप संबंधपरक आयात से निपटते हैं। लेकिन लिंक ने मुझे समाधान दिया।

मेरे आयातित दस्तावेज़ में, मैं एक अतिरिक्त स्क्रिप्ट लिखता हूं:

div.html

<div id="thediv">
  ...
</div>

<script>
document.body.prepend(
   document.currentScript.ownerDocument.querySelector('#thediv'));
</script>

अब जब html आयात प्राप्त किया जाता है तो स्क्रिप्ट निष्पादित हो जाएगी और html खंड को मुख्य दस्तावेज़ के body में प्रीपेन्ड कर देगा।

index.html

<link rel="import" href="div.html">

<script>
// now I can querySelector('#thediv')
</script>

यह सिर्फ एक उदाहरण है और यह एक डमी है, लेकिन मुझे लगता है कि मैं ज्यादातर उस तकनीक का उपयोग टेम्प्लेट के लिए करूंगा, टेम्प्लेट छिपे हुए हैं और उन्हें मुख्य दस्तावेज़ में प्रीपेड करना ठीक है।

अगर आपको लगता है कि उस पद्धति में खामियां हो सकती हैं, तो कृपया टिप्पणी करें।

0
vdegenne 24 सितंबर 2017, 14:12

HTML आयात को हटा दिया गया है और अब इसे M80 के रूप में हटा दिया गया है। देखें https://www.chromestatus.com/features/5144752345317376 और https://developers.google.com/web/updates/2019 /07/वेब-घटक-समय-से-उन्नयन अधिक विवरण के लिए।

आप अपने वेब घटक को आयात करने के लिए fetch() का उपयोग कर सकते हैं वेब घटकों को कैसे अलग करें व्यक्तिगत फ़ाइलें और उन्हें लोड करें?

0
Vitalicus 6 सितंबर 2020, 21:51