ডায়ামোনালি স্ক্রিপ্ট ট্যাগটি এসআরসি-র সাথে যুক্ত করুন যাতে এতে ডকুমেন্ট.ওরাইট অন্তর্ভুক্ত থাকতে পারে

Question

আমি একটি ওয়েবপৃষ্ঠায় একটি স্ক্রিপ্ট ট্যাগটি গতিশীলভাবে অন্তর্ভুক্ত করতে চাই তবে এর এসসিআরটির আমার কোনও নিয়ন্ত্রণ নেই সুতরাং src = "উত্স.জেএস" দেখতে এটি দেখতে পারা যায়।

document.write('<script type="text/javascript">')
document.write('alert("hello world")')
document.write('</script>')
document.write('<p>goodbye world</p>')

এখন সাধারণভাবে

<script type="text/javascript" src="source.js"></script> 

মাথার মধ্যে ভাল কাজ করে তবে কি অভ্যন্তরীণ এইচটিএমএল এর মতো কিছু ব্যবহার করে উত্স.js যুক্ত করতে পারে এমন অন্য কোনও উপায় আছে?

আমি চেষ্টা করেছি কি jsfiddle

Comments

কয়েক ঘন্টা লড়াইয়ের পরে পোস্টের সাবস্ক্রাইব করা সমাধান! https://github.com/krux/postscribe/

— ক্যাডেল ক্রিস্টো

ডকুমেন্ট.ওরাইট সহ

— অ্যাসিঙ্ক

Answer 1

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

Answer 2

আপনি document.createElement()এই ফাংশনটি ব্যবহার করতে পারেন :

function addScript( src ) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  document.body.appendChild( s );
}

Comments

আপনি কিভাবে এই async করতে হবে?

— ইউকেডাটাগীক

@ মোবাইল ব্লোক: s.async = সত্য;

— অ্যাক্লটল

s.setAttribute ('src', src); s.src = src হতে পারে (আমি মনে করি?) আমি জানি এটি পিসিজি নয়

— ব্র্যান্ডিটো

Answer 3

onloadস্ক্রিপ্টটি সফলভাবে লোড হওয়ার পরে এটি ফাংশনটি বলা যেতে পারে:

function addScript( src,callback) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  s.onload=callback;
  document.body.appendChild( s );
}

Comments

নতুন কিছু শিখেছি। নিস!

— মিশ্রণ করুন

Answer 4

আমি একাধিক স্ক্রিপ্ট লোড করতে একটি সুন্দর ছোট স্ক্রিপ্ট লিখেছি:

function scriptLoader(scripts, callback) {

    var count = scripts.length;

    function urlCallback(url) {
        return function () {
            console.log(url + ' was loaded (' + --count + ' more scripts remaining).');
            if (count < 1) {
                callback();
            }
        };
    }

    function loadScript(url) {
        var s = document.createElement('script');
        s.setAttribute('src', url);
        s.onload = urlCallback(url);
        document.head.appendChild(s);
    }

    for (var script of scripts) {
        loadScript(script);
    }
};

ব্যবহার:

scriptLoader(['a.js','b.js'], function() {
    // use code from a.js or b.js
});

Comments

দুঃখিত ... শুধু একটি ভাল এক যে নির্ভরতা অনুমতি পাওয়া stackoverflow.com/a/1867135/678780

— EliSherer

Answer 5

আপনি কোড স্নিপেট নিম্নলিখিত চেষ্টা করতে পারেন।

function addScript(attribute, text, callback) {
    var s = document.createElement('script');
    for (var attr in attribute) {
        s.setAttribute(attr, attribute[attr] ? attribute[attr] : null)
    }
    s.innerHTML = text;
    s.onload = callback;
    document.body.appendChild(s);
}

addScript({
    src: 'https://www.google.com',
    type: 'text/javascript',
    async: null
}, '<div>innerHTML</div>', function(){});

Answer 6

দিস ইজ ওয়ার্ক ফর মি।

আপনি এটি পরীক্ষা করতে পারেন।

var script_tag = document.createElement('script');
script_tag.setAttribute('src','https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js');
document.head.appendChild(script_tag);
window.onload = function() {
    if (window.jQuery) {  
        // jQuery is loaded  
        alert("ADD SCRIPT TAG ON HEAD!");
    } else {
        // jQuery is not loaded
        alert("DOESN'T ADD SCRIPT TAG ON HEAD");
    }
}

Answer 7

যখন স্ক্রিপ্টগুলি অবিচ্ছিন্নভাবে লোড করা হয় তারা ডকুমেন্ট.রাইট কল করতে পারে না। কলগুলি সহজেই উপেক্ষা করা হবে এবং কনসোলে একটি সতর্কতা লেখা হবে।

স্ক্রিপ্টটি গতিশীলভাবে লোড করতে আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:

var scriptElm = document.createElement('script');
scriptElm.src = 'source.js';
document.body.appendChild(scriptElm);

আপনার উত্সটি কোনও পৃথক ফাইলের সাথে সম্পর্কিত হলে এই পদ্ধতিরটি ভালভাবে কাজ করে।

তবে আপনার যদি ইনলাইন ফাংশন হিসাবে সোর্স কোড থাকে যা আপনি গতিশীলভাবে লোড করতে চান এবং স্ক্রিপ্ট ট্যাগে অন্যান্য বৈশিষ্ট্যগুলি যেমন শ্রেণি, প্রকার, ইত্যাদি যুক্ত করতে চান, তবে নীচের স্নিপেট আপনাকে সহায়তা করবে:

var scriptElm = document.createElement('script');
scriptElm.setAttribute('class', 'class-name');
var inlineCode = document.createTextNode('alert("hello world")');
scriptElm.appendChild(inlineCode); 
target.appendChild(scriptElm);

Answer 8

ভাল, আপনি গতিশীল জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করতে পারেন এমন একাধিক উপায় রয়েছে, আমি অনেকগুলি প্রকল্পের জন্য এটি ব্যবহার করি।

var script = document.createElement("script")
script.type = "text/javascript";
//Chrome,Firefox, Opera, Safari 3+
script.onload = function(){
console.log("Script is loaded");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);

আপনি সার্বজনীন ক্রিয়াকলাপ তৈরি করতে কল করতে পারেন যা আপনাকে প্রয়োজনীয় যতগুলি জাভাস্ক্রিপ্ট ফাইল লোড করতে সহায়তা করতে পারে। এখানে এই সম্পর্কে একটি সম্পূর্ণ টিউটোরিয়াল আছে।

ডায়নামিক জাভাস্ক্রিপ্ট সঠিক উপায়ে .োকানো

Comments

fyi, লিঙ্কটি কাজ করছে না, আমি আর কোথাও নিবন্ধটি খুঁজে পাইনি।

— ব্যবহারকারীর 1063287

Answer 9

এটি করার একমাত্র উপায় হ'ল document.writeআপনার নিজের ফাংশনটি প্রতিস্থাপন করা যা আপনার পৃষ্ঠার নীচে উপাদানগুলিকে যুক্ত করবে। এটি jQuery সহ বেশ সোজা এগিয়ে রয়েছে:

document.write = function(htmlToWrite) {
  $(htmlToWrite).appendTo('body');
}

যদি আপনার এইচটিএমএল ডকুমেন্টে আসে। প্রশ্ন উদাহরণের মতো htmlToWriteঅংশে রাইটিং করে আপনাকে বিভাগগুলি বাফার করতে হবে । এরকম কিছু হতে পারে:

document.write = (function() {
  var buffer = "";
  var timer;
  return function(htmlPieceToWrite) {
    buffer += htmlPieceToWrite;
    clearTimeout(timer);
    timer = setTimeout(function() {
      $(buffer).appendTo('body');
      buffer = "";
    }, 0)
  }
})()

Answer 10

আমি প্রতিটি স্ক্রিপ্টকে পুনরাবৃত্তভাবে সংযুক্ত করে চেষ্টা করেছি tried

দ্রষ্টব্য যদি আপনার স্ক্রিপ্টগুলি একের পর এক নির্ভরশীল হয় তবে অবস্থানটি সিঙ্কে থাকা দরকার।

মেজর নির্ভরতা সর্বশেষে অ্যারেতে থাকা উচিত যাতে প্রাথমিক স্ক্রিপ্টগুলি এটি ব্যবহার করতে পারে

const scripts = ['https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js']
let count = 0

  
 const recursivelyAddScript = (script, cb) => {
  const el = document.createElement('script')
  el.src = script
  if(count < scripts.length) {
    count ++
    el.onload = recursivelyAddScript(scripts[count])
    document.body.appendChild(el)
  } else {
    console.log('All script loaded')
    return
  }
}
 
  recursivelyAddScript(scripts[count])

Answer 11

সঠিক ক্রমের সাথে একে অপরের উপর নির্ভর করে এমন স্ক্রিপ্টগুলি লোড করে।

উপর ভিত্তি করে সত্যম পাঠক প্রতিক্রিয়া, কিন্তু লোড থাকলে স্থির করেছি। স্ক্রিপ্টটি আসলে লোড হওয়ার আগে এটি ট্রিগার করা হয়েছিল।

const scripts = ['https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js']
let count = 0

  
 const recursivelyAddScript = (script, cb) => {
  const el = document.createElement('script')
  el.src = script
  if(count < scripts.length) {
    count ++
    el.onload = () => recursivelyAddScript(scripts[count])
    document.body.appendChild(el)
  } else {
    console.log('All script loaded')
    return
  }
}
 
  recursivelyAddScript(scripts[count])

Answer 12

গুগল অ্যানালিটিক্স এবং ফেসবুক পিক্সেল যেভাবে ব্যবহার করে তা এখানে একটি সংক্ষিপ্ত স্নিপেট is

!function(e,s,t){(t=e.createElement(s)).async=!0,t.src="https://example.com/foo.js",(e=e.getElementsByTagName(s)[0]).parentNode.insertBefore(t,e)}(document,"script");

https://example.com/foo.jsআপনার স্ক্রিপ্টের পথটি প্রতিস্থাপন করুন ।

Answer 13

একটি ওয়ান-লাইনার (যদিও উপরের উত্তরগুলির জন্য কোনও প্রয়োজনীয় পার্থক্য নেই):

document.body.appendChild(document.createElement('script')).src = 'source.js';