स्क्रिप्ट टैग में पैरामीटर कैसे पारित करें?

Question 1

मैंने ट्यूटोरियल DIY विजेट्स को पढ़ा - डॉ निक द्वारा एक्सएसएस विजेट के लिए किसी अन्य साइट पर अपनी साइट को कैसे एम्बेड किया जाए।

मैं स्क्रिप्ट टैग में मापदंडों को पारित करने के लिए एक रास्ता ढूंढ रहा हूं। उदाहरण के लिए, निम्नलिखित कार्य करने के लिए:

<script src="http://path/to/widget.js?param_a=1&amp;param_b=3"></script>

क्या इसे करने का कोई तरीका है?

दो दिलचस्प लिंक:

Question 2

मैं एक सुपर पुराने सवाल का जवाब देने के लिए माफी मांगता हूं लेकिन उपरोक्त समाधानों के साथ एक घंटे की कुश्ती बिताने के बाद मैंने सरल सामान के लिए चुना।

<script src=".." one="1" two="2"></script>

स्क्रिप्ट के ऊपर:

document.currentScript.getAttribute('one'); //1
document.currentScript.getAttribute('two'); //2

Jquery या url पार्सिंग की तुलना में बहुत आसान है।

आपको IE के लिए @Yared Rodriguez के उत्तर से doucment.currentScript के लिए पॉलीफ़िल की आवश्यकता हो सकती है:

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

Question 3

HTML5 5 डेटा विशेषताओं में सुविधा का उपयोग करना बेहतर है

<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>

स्क्रिप्ट फ़ाइल http://path.to/widget.js के अंदर आप उस तरह से paremeters प्राप्त कर सकते हैं:

<script>
function getSyncScriptParams() {
         var scripts = document.getElementsByTagName('script');
         var lastScript = scripts[scripts.length-1];
         var scriptName = lastScript;
         return {
             width : scriptName.getAttribute('data-width'),
             height : scriptName.getAttribute('data-height')
         };
 }
</script>

Question 4

समझ गया। एक हैक की तरह, लेकिन यह बहुत अच्छा काम करता है:

var params = document.body.getElementsByTagName('script');
query = params[0].classList;
var param_a = query[0];
var param_b = query[1];
var param_c = query[2];

मैं स्क्रिप्ट टैग में कक्षाओं के रूप में पास करता हूं:

<script src="http://path.to/widget.js" class="2 5 4"></script>

इस लेख से बहुत मदद मिली।

Question 5

दूसरा तरीका मेटा टैग का उपयोग करना है। जो भी डेटा आपके जावास्क्रिप्ट को पास करना चाहिए, उसे इस तरह सौंपा जा सकता है:

<meta name="yourdata" content="whatever" />
<meta name="moredata" content="more of this" />

डेटा को इस तरह मेटा टैग से खींचा जा सकता है (सबसे अच्छा एक DOMContentLoaded ईवेंट हैंडलर में किया जाता है):

var data1 = document.getElementsByName('yourdata')[0].content;
var data2 = document.getElementsByName('moredata')[0].content;

JQuery या लाइक, कोई हैक्स और वर्कअराउंड के साथ बिल्कुल कोई परेशानी नहीं है, और किसी भी HTML संस्करण के साथ काम करता है जो Haa का समर्थन करता है ...

Question 6

JQuery के पास HTML से जावास्क्रिप्ट में पैरामीटर पारित करने का एक तरीका है:

इसे myhtml.htmlफ़ाइल में रखें :

<!-- Import javascript -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Invoke a different javascript file called subscript.js -->
<script id="myscript" src="subscript.js" video_filename="foobar.mp4">/script>

उसी निर्देशिका में एक subscript.jsफ़ाइल बनाएं और इसे वहां डालें:

//Use jquery to look up the tag with the id of 'myscript' above.  Get 
//the attribute called video_filename, stuff it into variable filename.
var filename = $('#myscript').attr("video_filename");

//print filename out to screen.
document.write(filename);

परिणाम का विश्लेषण करें:

लोड हो रहा है myhtml.html पेज में स्क्रीन के लिए 'foobar.mp4' प्रिंट है। Video_filename नामक चर html से जावास्क्रिप्ट में पारित किया गया था। जावास्क्रिप्ट ने इसे स्क्रीन पर मुद्रित किया, और यह माता-पिता में HTML में एम्बेडेड के रूप में दिखाई दिया।

jsfiddle सबूत है कि ऊपर काम करता है:

http://jsfiddle.net/xqr77dLt/

Question 7

यदि आप jquery का उपयोग कर रहे हैं तो आप उनकी डेटा विधि पर विचार करना चाह सकते हैं ।

मैंने आपकी प्रतिक्रिया में जो आप कोशिश कर रहे हैं, उसके समान कुछ का उपयोग किया है:

<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4">
</script>

आप एक ऐसा फंक्शन भी बना सकते हैं, जो आपको सीधे GET के पैरामेट्स हड़पने की अनुमति देता है (यह वही है जो मैं अक्सर उपयोग करता हूं):

function $_GET(q,s) {
    s = s || window.location.search;
    var re = new RegExp('&'+q+'=([^&]*)','i');
    return (s=s.replace(/^\?/,'&').match(re)) ? s=s[1] : s='';
}

// Grab the GET param
var param_a = $_GET('param_a');

Question 8

JQuery के लिए धन्यवाद, एक साधारण HTML5 अनुरूप समाधान डेटा को संग्रहीत करने के लिए div की तरह एक अतिरिक्त HTML टैग बनाना है।

HTML :

<div id='dataDiv' data-arg1='content1' data-arg2='content2'>
  <button id='clickButton'>Click me</button>
</div>

जावास्क्रिप्ट :

$(document).ready(function() {
    var fetchData = $("#dataDiv").data('arg1') + 
                    $("#dataDiv").data('arg2') ;

    $('#clickButton').click(function() {
      console.log(fetchData);
    })
});

ऊपर दिए गए कोड के साथ लाइव डेमो: http://codepen.io/anon/pen/KzzNmQ?editors=1011#0

लाइव डेमो पर, कोई HTML5 डेटा से डेटा देख सकता है- * विशेषताओं को संक्षिप्त और लॉग में मुद्रित किया जा सकता है।

स्रोत: https://api.jquery.com/data/

Question 9

यह एक बहुत पुराना धागा है, मुझे पता है, लेकिन अगर कोई व्यक्ति समाधान खोजने के लिए यहां पहुंचता है तो यह भी मदद कर सकता है।

मूल रूप से मैंने उस तत्व को प्राप्त करने के लिए document.currentScript का उपयोग किया जहां से मेरा कोड चल रहा है और मैं उस चर के नाम का उपयोग करके फ़िल्टर करता हूं जिसे मैं खोज रहा हूं। मैंने इसे "प्राप्त" नामक एक विधि के साथ वर्तमानस्क्रिप्ट को विस्तारित किया, इसलिए हम उस स्क्रिप्ट के अंदर का मान प्राप्त करने में सक्षम होंगे:

document.currentScript.get('get_variable_name');

इस तरह हम विशेष विशेषताओं को जोड़े बिना चर को पुनः प्राप्त करने के लिए मानक यूआरआई का उपयोग कर सकते हैं।

यह अंतिम कोड है

document.currentScript.get = function(variable) {
    if(variable=(new RegExp('[?&]'+encodeURIComponent(variable)+'=([^&]*)')).exec(this.src))
    return decodeURIComponent(variable[1]);
};

मैं IE के बारे में भूल रहा था :) यह उतना आसान नहीं हो सकता ... वैसे मैंने यह उल्लेख नहीं किया है कि document.currentScript एक HTML5 प्रॉपर्टी है। इसे IE के विभिन्न संस्करणों के लिए शामिल नहीं किया गया है (मैंने IE11 तक परीक्षण किया, और यह अभी तक वहां नहीं था)। IE संगतता के लिए, मैंने इस भाग को कोड में जोड़ा:

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

हम यहां क्या कर रहे हैं IE के लिए कुछ वैकल्पिक कोड को परिभाषित करने के लिए, जो वर्तमान स्क्रिप्ट ऑब्जेक्ट को लौटाता है, जो कि src संपत्ति से मापदंडों को निकालने के लिए समाधान में आवश्यक है। यह IE के लिए सही समाधान नहीं है क्योंकि कुछ सीमाएं हैं; यदि स्क्रिप्ट अतुल्यकालिक रूप से भरी हुई है। नए ब्राउज़रों में "। CurrentScript" प्रॉपर्टी शामिल होनी चाहिए।

मुझे उम्मीद है यह मदद करेगा।

Question 10

एक विशेषता बनाएं जिसमें मापदंडों की सूची हो, जैसे:

<script src="http://path/to/widget.js" data-params="1, 3"></script>

फिर, अपने जावास्क्रिप्ट में, एक सरणी के रूप में पैरामीटर प्राप्त करें:

var script = document.currentScript || 
/*Polyfill*/ Array.prototype.slice.call(document.getElementsByTagName('script')).pop();

var params = (script.getAttribute('data-params') || '').split(/, */);

params[0]; // -> 1
params[1]; // -> 3

Question 11

उन मानों को रखें जिनकी आपको कहीं आवश्यकता है, जहां दूसरी स्क्रिप्ट उन्हें छिपा इनपुट की तरह पुनः प्राप्त कर सकती है, और जब आप अपनी नई स्क्रिप्ट को आरंभ करते हैं, तो उन मानों को उनके कंटेनर से खींच सकते हैं। तुम भी एक छिपे हुए क्षेत्र में एक JSON स्ट्रिंग के रूप में अपने सभी params डाल सकता है।

Question 12

मैं पुराने ब्राउज़रों के यथासंभव समर्थन के साथ समाधान चाहता था। अन्यथा मैं कहूंगा कि या तो करंटस्क्रिप्ट या डेटा एट्रिब्यूट विधि सबसे स्टाइलिश होगी।

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

स्थानीय भंडार

/* On the original page, you add an inline JS Script: */
<script>
   localStorage.setItem('data-1', 'I got a lot of data.');
   localStorage.setItem('data-2', 'More of my data.');
   localStorage.setItem('data-3', 'Even more data.');
</script>

/* External target JS Script, where your data is needed: */
var data1 = localStorage.getItem('data-1');
var data2 = localStorage.getItem('data-2');
var data3 = localStorage.getItem('data-3');

लोकलस्टोरेज में पूर्ण आधुनिक ब्राउज़र समर्थन है, और पुराने ब्राउज़रों का आश्चर्यजनक रूप से अच्छा समर्थन भी है, IE 8, फ़ायरफ़ॉक्स 3,5 और सफारी 4 [ग्यारह साल पहले]।

यदि आपके पास बहुत अधिक डेटा नहीं है, लेकिन फिर भी व्यापक ब्राउज़र समर्थन चाहते हैं, तो शायद सबसे अच्छा विकल्प है:

मेटा टैग [रोबिदु द्वारा]

/* HTML: */
<meta name="yourData" content="Your data is here" />

/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

इसका दोष यह है कि मेटा टैग लगाने का सही स्थान [HTML 4 तक] हेड टैग में है, और हो सकता है कि आप इस डेटा को वहां न चाहें। उससे बचने के लिए या शरीर में मेटा टैग लगाने के लिए, आप एक का उपयोग कर सकते हैं:

छिपा हुआ पैराग्राफ

/* HTML: */
<p hidden id="yourData">Your data is here</p>

/* JS: */
var yourData = document.getElementById('yourData').innerHTML;

अधिक ब्राउज़र समर्थन के लिए, आप छिपी विशेषता के बजाय CSS वर्ग का उपयोग कर सकते हैं:

/* CSS: */
.hidden {
   display: none;
}

/* HTML: */
<p class="hidden" id="yourData">Your data is here</p>

Question 13

यह jQuery 3.4 के लिए समाधान है

<script src="./js/util.js" data-m="myParam"></script>

$(document).ready(function () {
    var m = $('script[data-m][data-m!=null]').attr('data-m');
})