স্ক্রিপ্ট ট্যাগে প্যারামিটারগুলি কীভাবে পাস করবেন?

Question 1

আমি DIY উইজেটস টিউটোরিয়ালটি পড়েছি - ডাঃ নিক দ্বারা এক্সএসএস উইজেটগুলির জন্য আপনার সাইটে অন্য সাইটে এম্বেড করার পদ্ধতি How

আমি স্ক্রিপ্ট ট্যাগে প্যারামিটারগুলি পাস করার উপায় খুঁজছি। উদাহরণস্বরূপ, নিম্নলিখিত কাজ করা:

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

এই কাজ করতে একটি উপায় আছে কি?

দুটি আকর্ষণীয় লিঙ্ক:

কীভাবে জাভাস্ক্রিপ্ট উইজেট এম্বেড করবেন যা অজানা পরিবেশে jQuery এর উপর নির্ভর করে (স্ট্যাকওভারফ্লো আলোচনা)
স্ক্রিপ্ট ট্যাগে প্যারামিটারগুলি পাস করার বিষয়ে একটি নিবন্ধ

Question 2

আমি একটি অতি পুরানো প্রশ্নের জবাব দেওয়ার জন্য ক্ষমা চাইছি কিন্তু উপরের সমাধানগুলি সহ এক ঘন্টা কুস্তি কাটিয়ে আমি সহজ স্টাফ বেছে নিয়েছি।

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

উপরের স্ক্রিপ্টের ভিতরে:

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

Jquery বা url পার্সিংয়ের চেয়ে অনেক বেশি সহজ।

আইইয়ের জন্য @ ইয়ার্ড রড্রিগেজের উত্তর থেকে ডাউকামেন্ট.কোর্নস্ক্রিপ্টের জন্য আপনার পলিফিলের প্রয়োজন হতে পারে:

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

Question 3

এইচটিএমএল 5 বৈশিষ্ট্যযুক্ত ডেটা অ্যাট্রিবিউটে বৈশিষ্ট্যটি ব্যবহার করা আরও ভাল

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

স্ক্রিপ্ট ফাইলের ভিতরে http://path.to/widget.js আপনি সেইভাবে প্যারামিটারগুলি পেতে পারেন:

<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" />

এরপরে এই জাতীয় মেটা ট্যাগগুলি থেকে ডেটা টেনে নেওয়া যায় (একটি ডমকন্টেন্টলয়েড ইভেন্ট হ্যান্ডলারে সেরা করা):

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

একেবারে jQuery বা পছন্দ, কোনও হ্যাক এবং workarounds প্রয়োজন নেই কোনও ঝামেলা, এবং মেটা ট্যাগ সমর্থন করে এমন কোনও HTML সংস্করণে কাজ করে ...

Question 6

জিক্যুরির এইচটিএমএল থেকে জাভাস্ক্রিপ্টে প্যারামিটারগুলি পাস করার একটি উপায় রয়েছে:

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' মুদ্রণ রয়েছে। ভিডিও_ ফাইল ফাইল নামক ভেরিয়েবলটি এইচটিএমএল থেকে জাভাস্ক্রিপ্টে পাস করা হয়েছিল। জাভাস্ক্রিপ্ট এটিকে স্ক্রিনে মুদ্রিত করেছে এবং এটি পিতামাতার মধ্যে এইচটিএমএল এম্বেড হিসাবে উপস্থিত হয়েছিল।

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>

আপনি এমন একটি ফাংশনও তৈরি করতে পারেন যা আপনাকে জিইটি প্যারামগুলি সরাসরি ধরতে দেয় (এটি আমি প্রায়শই ব্যবহার করি):

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 ধন্যবাদ, একটি সাধারণ এইচটিএমএল 5 কমপ্লায়েন্ট সমাধান হ'ল ডিভিওর মতো একটি অতিরিক্ত এইচটিএমএল ট্যাগ তৈরি করে ডেটা সঞ্চয় করে।

এইচটিএমএল :

<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

লাইভ ডেমোতে, কেউ এইচটিএমএল 5 ডেটা- * বৈশিষ্ট্য থেকে ডেটা দেখতে পারে এবং লগতে মুদ্রিত হতে পারে।

সূত্র: https://api.jquery.com/data/

Question 9

এটি একটি খুব পুরানো থ্রেড, আমি জানি তবে সমাধানের সন্ধানের পরে কেউ যদি এখানে পৌঁছে তবে এটির সাহায্যও হতে পারে।

মূলত আমি আমার কোডটি যে উপাদান থেকে চলছে সে উপাদানটি পেতে ডকুমেন্ট.কন্ট্রনস্ক্রিপ্ট ব্যবহার করেছি এবং আমি যে পরিবর্তনশীলটির সন্ধান করছি তার নাম ব্যবহার করে ফিল্টার করি আমি এটি "get" নামক একটি পদ্ধতির সাথে বর্তমান স্ক্রিপ্ট প্রসারিত করেছি, সুতরাং আমরা এই স্ক্রিপ্টের অভ্যন্তরে মানটি ব্যবহার করতে সক্ষম হব:

document.currentScript.get('get_variable_name');

এইভাবে আমরা বিশেষ গুণাবলী যুক্ত না করে ভেরিয়েবলগুলি পুনরুদ্ধার করতে স্ট্যান্ডার্ড ইউআরআই ব্যবহার করতে পারি।

এটিই চূড়ান্ত কোড

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

আমি আই আই সম্পর্কে ভুলে যাচ্ছিলাম :) এটি এত সহজ হতে পারে না ... ভাল আমি উল্লেখ করিনি যে ডকুমেন্ট.কন্ট্রনস্ক্রিপ্ট একটি HTML5 সম্পত্তি। এটি আইই এর বিভিন্ন সংস্করণের জন্য অন্তর্ভুক্ত করা হয়নি (আমি আইই 11 পর্যন্ত পরীক্ষা করেছি এবং এটি এখনও ছিল না)। IE সামঞ্জস্যের জন্য, আমি কোডটিতে এই অংশটি যুক্ত করেছি:

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

আমরা এখানে যা করছি তা হ'ল আইই এর জন্য কিছু বিকল্প কোড সংজ্ঞায়িত করা, যা বর্তমান স্ক্রিপ্ট অবজেক্টটি ফেরত দেয়, যা এসআরসি সম্পত্তি থেকে প্যারামিটারগুলি বের করার সমাধানে প্রয়োজনীয়। আইই এর জন্য এটি সঠিক সমাধান নয় কারণ কিছু সীমাবদ্ধতা রয়েছে; স্ক্রিপ্টটি যদি অ্যাসিঙ্ক্রোনালি লোড হয়। আরও নতুন ব্রাউজারগুলিতে ".কালেন্টস্ক্রিপ্ট" বৈশিষ্ট্য অন্তর্ভুক্ত করা উচিত।

আমি আসা করি এটা সাহায্য করবে.

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

আপনার প্রয়োজনীয় মানগুলি এমন কোনও জায়গায় রাখুন যেখানে অন্য স্ক্রিপ্টগুলি কোনও লুকানো ইনপুটের মতো এগুলি পুনরুদ্ধার করতে পারে এবং তারপরে আপনার নতুন স্ক্রিপ্ট শুরু করার সময় সেই মানগুলি তাদের ধারক থেকে টানুন। এমনকি আপনি জাসন স্ট্রিং হিসাবে আপনার সমস্ত প্যারামকে একটি লুকানো ক্ষেত্রে রাখতে পারেন।

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;

এর ত্রুটি এটি হ'ল মেটা ট্যাগগুলি রাখার সঠিক জায়গা [এইচটিএমএল 4 অবধি] প্রধান ট্যাগের মধ্যে রয়েছে এবং আপনি সম্ভবত এই ডেটাটি চান না। এটি এড়াতে বা মেটা ট্যাগ দেহে রেখে, আপনি এটি ব্যবহার করতে পারেন:

লুকানো অনুচ্ছেদ

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

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

আরও ব্রাউজার সমর্থনের জন্য, আপনি লুকানো বৈশিষ্ট্যের পরিবর্তে একটি সিএসএস ক্লাস ব্যবহার করতে পারেন:

/* 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');
})