2012-08-16 16 views
6

मैं एकाधिक पृष्ठों पर एक ही नेविगेशन मेनू शामिल करना चाहता हूं, हालांकि मेरे पास PHP समर्थन नहीं है, और न ही मैं किसी अन्य तरीके से अपने सर्वर को प्रभावित कर सकता हूं।PHP के बिना PHP को अनुकरण करें

मैं सभी पृष्ठों पर एचटीएमएल की प्रतिलिपि बनाने और चिपकाने से बचना चाहता हूं क्योंकि यह मेनू को दर्द को अद्यतन करेगा।

दो विकल्प मैं के बारे में सोच सकते हैं इस प्रकार हैं:

1) सभी सामग्री है एक पृष्ठ पर मौजूद हैं, तो कौन-सी सामग्री एक कीवर्ड यूआरएल के साथ जोड़ दिया आधार पर दिखाए जाने का निर्धारण:

example.com/index?home 
example.com/index?news 

2) एक समारोह है कि मेनू प्रत्येक पृष्ठ

function setupMenu() { 
    $("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>"); 
} 

पर बाहर लिखते हैं और विकल्प 1 के साथ समारोह फोन है कि एक जावास्क्रिप्ट फ़ाइल शामिल करें, अद्यतन करने की प्रक्रिया ओ शामिल होंगे च एक पृष्ठ

विकल्प 2 के साथ

पर एक नव मेनू संपादन, अद्यतन करने हैं जावास्क्रिप्ट फ़ाइल में समारोह को बदलने का मतलब

विकल्प 1 के साथ मेरी चिंता यह है कि पेज की सामग्री का एक बहुत लोड करने के लिए होता है यह है कि प्रदर्शित करने की आवश्यकता नहीं होगी। विकल्प 2 के लिए मेरी चिंता तुच्छ लग सकती है लेकिन यह है कि कोड गन्दा हो सकता है।

क्या ऐसा कोई कारण है कि यह एक दूसरे से बेहतर होगा? या क्या कोई तीसरा बेहतर विकल्प है जिसे मैं याद कर रहा हूं?

+1

आपके पास सर्वर पर PHP समर्थन नहीं हो सकता है। हालांकि आप अपने स्थानीय कंप्यूटर पर वेबसाइट बना सकते हैं और उसके बाद पूर्ण पृष्ठ (आवश्यक प्रणाली) उत्पन्न कर सकते हैं। कभी-कभी यह एक व्यवहार्य विकल्प है। – hakre

+0

+1 @ हाकरा, यह चारों ओर एक बहुत चालाक काम है। –

उत्तर

5

आप कुछ ही विकल्प हैं, अपने स्वयं के फायदे और कमियां के साथ प्रत्येक:

  • सर्वर-साइड इनक्लूड, या लघु उद्योग। यदि आपके पास PHP नहीं है तो आपके पास एक अच्छा मौका है कि आपके पास एसएसआई नहीं है, और इस विकल्प को आपके .htaccess फ़ाइल के साथ कुछ परेशान करने की आवश्यकता है। डोमिनिक पी की जांच करेंएसएसआई के एक लेखन के लिए जवाब है। जावास्क्रिप्ट या फ्रेम्स पर एसएसआई का लाभ यह है कि उपयोगकर्ता को जेएस सक्षम करने की आवश्यकता नहीं है - जो कि बहुत से उपयोगकर्ता नहीं करते हैं - और यह भी कोई नौसैनिक कठिनाइयों को प्रस्तुत नहीं करता है।

  • फ्रेम्स। नेविगेशन को अपनी अलग फ़ाइल में रखने के लिए आप या तो standard frames का उपयोग कर सकते हैं, और सही स्टाइल के साथ यह निर्बाध होगा। आप साइट के मनमानी हिस्से में साइडबार या जो भी हो, अपने नेविगेशन को रखने के लिए iframe का भी उपयोग कर सकते हैं। फ्रेम, विशेष रूप से मानक फ्रेम के नकारात्मक पक्ष यह है कि वे बुकमार्किंग, लिंक और अग्रेषित/बैक बटन अजीब तरीके से व्यवहार करते हैं। ऊपर की तरफ, फ्रेम को ब्राउज़र अनुपालन या सर्वर समर्थन की आवश्यकता नहीं है।

  • जावास्क्रिप्ट। आप जेएस समाधान के उत्कृष्ट स्पष्टीकरण के लिए किसी भी अन्य उत्तर का उल्लेख कर सकते हैं, खासकर अगर आप jQuery का उपयोग कर रहे हैं। हालांकि, यदि आपकी साइट अन्यथा गतिशील नहीं है कि आपके उपयोगकर्ता जावास्क्रिप्ट सक्षम करना चाहते हैं, तो इसका मतलब यह होगा कि आपके दर्शकों की बड़ी संख्या मेनू को बिल्कुल खराब नहीं दिखाई देगी।

  • -
+0

फ्रेम के साथ जा रहा है क्योंकि एसएसआई एक विकल्प नहीं है। जावास्क्रिप्ट लोड() विधि काम करता है लेकिन – dougmacklin

+0

को पूरा करने में बहुत लंबा समय लगता है, जैसा कि आपने किया है, मैं फ्रेम्स के साथ चिपकने की सलाह दूंगा, लेकिन यदि जेएस लोड() लंबे समय तक लेता है तो शायद कुछ और चल रहा है। एफडब्ल्यूआईडब्लू, एक आईफ्रेम शायद आपकी नौसेना के लिए मानक फ्रेम से बेहतर होगा। क्षमा करें आपकी होस्टिंग इतनी प्रतिबंधित है! –

4

हाँ उपयोग .load jQuery ajax समारोह

$('#result').load('ajax/menu.html'); 

उस स्थिति में आपके कोड साफ रहता है, और तुम सिर्फ अलग HTML फ़ाइलों में शामिल संपादित कर सकते हैं बस PHP की तरह।

+0

का समर्थन करता है, आपके उत्तर के लिए धन्यवाद, चिह्नित @ user190284 को स्वीकार्य रूप से स्वीकार किया गया है क्योंकि मुझे लगता है कि यह उन लोगों के लिए अधिक उपयोगी है जो jQuery – dougmacklin

1

Server Side Includes देखें। मेरे पास उनके साथ पूरी तरह से अनुभव नहीं है, लेकिन मुझे जो याद है, उससे उन्हें आपकी समस्या का हल करने के लिए डिज़ाइन किया गया है।

3

आपको इस कार्य के लिए AJAX पर विचार करना चाहिए। JQuery जैसी तीसरी पार्टी लाइब्रेरी शामिल करें और आईडी द्वारा लक्षित करने वाले प्लेसहोल्डर के अंदर अलग-अलग HTML फ़ाइलों को लोड करें।

जैसे, अपने मुख्य HTML पृष्ठ में:

<div id="mymenu"></div> 

इसके अलावा, अपने मुख्य HTML में है, लेकिन HEAD अनुभाग में:

$('#mymenu').load('navigation.html'); 

लेकिन आपका सर्वश्रेष्ठ दांव एक होस्टिंग करने के लिए स्विच करने के लिए किया जाएगा जो PHP या किसी अन्य सर्वर-पक्ष का समर्थन करता है। यह आपके जीवन को बहुत आसान बना देगा।

+1

से कुछ परिचित नहीं हैं परीक्षण, यह विधि काम करता है लेकिन नौसेना प्रकट होने तक दो सेकंड से अधिक की औसत गति बहुत लंबी, लेता है। मेरा सर्वर धीरे-धीरे सामान्य रूप से चीजों को संसाधित करता प्रतीत होता है, इसलिए मैं भविष्य के उपयोगकर्ताओं को खुद को – dougmacklin

+0

के लिए प्रयास करने की सलाह देता हूं लोड हो रहा है समय आपके सर्वर और ग्राहक की कनेक्शन की गति पर पूरी तरह से निर्भर करता है। प्राप्त डेटा का पार्सिंग स्वयं जावास्क्रिप्ट इंजन (इस मामले में इसका jQuery एक्सटेंशन) का उपयोग करके कुछ मिलीसेकंड के भीतर होता है। –

1

आप HTML आयातों http://w3c.github.io/webcomponents/spec/imports/

यहाँ का उपयोग कर सकते http://www.html5rocks.com/en/tutorials/webcomponents/imports/

warnings.html से एक उदाहरण है शामिल

<div class="warning"> 
    <style scoped> 
     h3 { 
     color: red; 
     } 
    </style> 
    <h3>Warning!</h3> 
    <p>This page is under construction</p> 
    </div> 

    <div class="outdated"> 
    <h3>Heads up!</h3> 
    <p>This content may be out of date</p> 
    </div> 

फिर index.html को रख सकती

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

    // Grab DOM from warning.html's document. 
    var el = content.querySelector('.warning'); 

    document.body.appendChild(el.cloneNode(true)); 
    </script> 
</body> 
संबंधित मुद्दे