एचटीएमएल/जावास्क्रिप्ट

में आंशिक प्रस्तुत करना मैं यह स्पष्ट करने की कोशिश करता हूं कि मैं क्या करना चाहता हूं। मेरे पास कुछ HTML फ़ाइलें हैं, और उनमें से प्रत्येक मैं आंशिक रूप से अन्य HTML फ़ाइल में प्रस्तुत करना चाहता हूं, उदाहरण के लिए header.html और footer.html DRY अवधारणा को देखने के लिए।एचटीएमएल/जावास्क्रिप्ट

HTML फ़ाइलों इस तरह दिखना चाहिए:

<!--render header.html--> 
<div> 
    Content 
</div> 
<!--render footer.html-->

मैं ऐसा कैसे कर सकता है?

स्रोत

2012-07-22 Afshin Mehrabani

आप किसी अन्य रूप में एक एचटीएमएल फ़ाइल की सामग्री को शामिल करने के लिए करना चाहते हैं? – starbeamrainbowlabs

@starbeamrainbowlabs: बिल्कुल, हां। –

क्या आप PHP या किसी अन्य सर्वर साइड प्रोग्रामिंग भाषा का उपयोग कर सकते हैं, या क्या यह सभी क्लाइंट पक्ष होना चाहिए? – starbeamrainbowlabs

Here's a link (Google I से पहले मैं जोड़ सकता हूं) जो बताता है कि विभिन्न भाषाओं में इसे कैसे किया जाए।

यह भी ध्यान रखें कि कुछ आईडीई आपके लिए इसका ख्याल रखते हैं। ड्रीमवेवर एक उदाहरण है; एएसपी.नेट में मास्टर पेज हैं; और इसी तरह।

पीएचपी:

<?php 
require($DOCUMENT_ROOT . "path to file/include-file.html"); 
?>

एएसपी:

<!--#include file="path to file/include-file.html"-->

जे एस:

जावास्क्रिप्ट एक और तरीका है अपने साइट के पृष्ठों के भीतर एचटीएमएल शामिल करने के लिए है। इसका लाभ सर्वर-स्तर प्रोग्रामिंग की आवश्यकता नहीं है। लेकिन यह सर्वर-स्तर की तुलना में थोड़ा अधिक जटिल है विधियों को शामिल करें।

एक जावास्क्रिप्ट फाइल करने के लिए अपनी साइट के आम तत्वों के लिए HTML की बचत करें। इस फ़ाइल में लिखे गए किसी भी एचटीएमएल को दस्तावेज़ 0wr35 फ़ंक्शन के साथ स्क्रीन पर मुद्रित किया जाना चाहिए।

अपने पृष्ठों पर जावास्क्रिप्ट फ़ाइल को शामिल करने के लिए एक स्क्रिप्ट टैग का उपयोग करें।
< स्क्रिप्ट type = "text/javascript" src = "फाइल करने के लिए/पथ शामिल-file.js">

उपयोग कि दिखाई देता है तो फ़ाइल शामिल करना चाहते हैं पर एक ही कोड।

कृपया ध्यान दें जे एस संस्करण नहीं आदर्श है कि।
1. जेएस ब्राउज़र में अक्षम या अनुपलब्ध हो सकता है।
2. पृष्ठ एक बार में सभी को प्रस्तुत/लोड नहीं किया जाएगा।

इसके अलावा, मुझे नहीं लगता कि DRY वास्तव में इस के लिए मायने रखता है। एक आईडीई का उपयोग करने पर विचार करें जो आपके लिए पेज टेम्पलेट्स बनाएगा (उदाहरण के लिए ड्रीमवेवर की तरह)।
मैं करूंगा

<html> 
    <body> 
     <div>my header</div> 
     <iframe src="mycontent.html" /> 
     <div>my fooder</div> 
    </body> 
</html>

अस्वीकरण:

यदि आपके पास पर्याप्त बहादुर (और एक छोटा सा पुराने जमाने) कर रहे हैं और आप ऊपर के किसी भी उपयोग नहीं कर सकते हैं, तो अपनी सामग्री के लिए एक iframe उपयोग करने पर विचार आईफ्रेम या जेएस दृष्टिकोण को लागू करने के बजाय अपने हाथों को काट लें।नीड यह करने के लिए है कि क्या आप वास्तव में के प्रति गहरी ध्यान दे।

स्रोत

2012-07-22 07:43:23

वह HTML फ़ाइल में HTML फ़ाइल शामिल करने के लिए, आप कैसे एक .html एक्सटेंशन फ़ाइल पर php का उपयोग करते हैं कोशिश कर रहा है? – DannyG

@ डैनीजी मेरा जवाब दर्शाता है कि यह कई तकनीकों में कैसे हासिल किया जा सकता है। जबकि मैं इसकी अनुशंसा नहीं करता हूं, यदि ओपी केवल HTML फ़ाइलों के साथ ऐसा करना चाहता है तो विकल्प मेरे पोस्ट में नोट किए गए जेएस या आईएफआरएएम हैं। जे एस अनुभाग से उद्धरण:। "सर्वर-स्तरीय प्रोग्रामिंग की जरूरत नहीं" –

@DannyG जे एस भी एक्सएचआर अनुरोधों में सामग्री को खींचने के लिए –

यदि आप सर्वर-साइड प्रोग्रामिंग का उपयोग कर रहे हैं, तो आप सर्वर-साइड का उपयोग कर सकते हैं यदि आपकी मेजबान फ़ाइल एक HTML फ़ाइल है तो आप header.html और footer.html फ़ाइलों को शामिल करने के लिए HTML SCRIPT टैग का उपयोग कर सकते हैं। हालांकि, मुझे यकीन नहीं है कि आंशिक रूप से HTML फ़ाइल को प्रस्तुत करके आप वास्तव में क्या मतलब रखते हैं?

स्रोत

2012-07-22 07:44:06 Shant

मैं किसी भी सर्वर साइड भाषा का उपयोग नहीं करता हूं। केवल जावास्क्रिप्ट, एचटीएमएल और jQuery। –

खैर उस स्थिति में, आप स्क्रिप्ट टैग का उपयोग src विशेषता एचटीएमएल फ़ाइल का URL होने के साथ HTML फ़ाइल शामिल करने के लिए कर सकते हैं। फ्लेम द्वारा पोस्ट किया गया आलेख बहुत उपयोगी है। – Shant

तुम सिर्फ सादे HTML और जावास्क्रिप्ट का उपयोग कर रहे हैं, तो आप jQuery शामिल हैं और अपने मुख्य पृष्ठ में एक और HTML पृष्ठ के संघर्ष लोड करने के लिए AJAX अनुरोध इस्तेमाल कर सकते हैं।

'(लोड)' यहाँ समारोह jQuery पर एक नज़र डालें:

http://api.jquery.com/load/

मानते हुए अपने निम्न HTML है:

<div id="header"></div> 
<div id="content"></div> 
<div id="footer"></div>

अपने उपयोग कुछ इस तरह दिखेगा:

$('#header').load('header.html'); 
$('#footer').load('footer.html');

स्रोत

2012-07-22 07:46:47 dougajmcdonald

यह मेरे लिए क्रॉस मूल अनुरोध त्रुटि का कारण बनता है: -/ – ajbraus

यह तब होगा यदि आप किसी अन्य डोमेन से सामग्री लोड करने का प्रयास कर रहे हैं (जब तक कि वे CORS सक्षम नहीं करते हैं) – dougajmcdonald

... या यदि आप इसे स्थानीय HTML फ़ाइल से चला रहे हैं । – marsze

आप एक क्लाइंट साइड के लिए देख रहे हैं केवल इतना चेतावनी है कि एचटीएमएल/जेएस केवल आपको AngularJS और उसके ngInclude वाक्यविन्यास पर एक नज़र रखना चाहिए।

http://docs.angularjs.org/#!/api/ng.directive:ngInclude

स्रोत

2012-07-22 07:48:41 Christoph

धन्यवाद क्रिस्टोफ! "ng-include src" अच्छा है, ऐसा लगता है कि fragment.js वही काम करता है, लेकिन त्रुटि बढ़ाता है .... – dfang

एचटीएमएल/जावास्क्रिप्ट

उत्तर

संबंधित मुद्दे