কোনও <script> ট্যাগ লোড করতে ব্যর্থ হয়েছে কীভাবে তা বলবেন

111

আমি <script>একটি পৃষ্ঠায় গতিশীলভাবে ট্যাগ যুক্ত করছি <head>এবং আমি বোঝাতে সক্ষম হতে চাই যে কোনওভাবেই লোডটি ব্যর্থ হয়েছে কিনা - একটি 404, লোড হওয়া স্ক্রিপ্টে একটি স্ক্রিপ্ট ত্রুটি, যাই হোক না কেন।

ফায়ারফক্সে, এটি কাজ করে:

var script_tag = document.createElement('script');
script_tag.setAttribute('type', 'text/javascript');
script_tag.setAttribute('src', 'http://fail.org/nonexistant.js');
script_tag.onerror = function() { alert("Loading failed!"); }
document.getElementsByTagName('head')[0].appendChild(script_tag);

তবে এটি আই বা সাফারিতে কাজ করে না।

ফায়ারফক্স ছাড়া অন্য ব্রাউজারগুলিতে এই কাজটি করার কোনও উপায় কি কেউ জানেন?

(আমি মনে করি না যে সমাধানগুলির জন্য .js ফাইলগুলির মধ্যে বিশেষ কোড স্থাপন করা ভাল একটি ভাল It's এটি অবাস্তব এবং জটিল নয়))

javascript  onerror  script-tag 
— ডেভিড
সূত্র
4
বড় ওয়েবসাইট, এজ্যাক্সের মাধ্যমে লোড হওয়া সামগ্রীর জন্য নির্ভরতার স্বয়ংক্রিয় লোড। if+ পোলিং বিরক্তিকর ক্রফ্ট যা আমি সমস্ত জেএসে রাখতে চাই না।
— ডেভিড
2
স্ক্রিপ্ট ট্যাগ ইনজেকশন ব্যবহার করে JSONP অনুরোধ করার সময় আপনি লোড ব্যর্থতাও পরীক্ষা করতে পারেন ...
— স্কেলসান
2
উত্তর এড়িয়ে যাও stackoverflow.com/questions/538745/...
— Pacerier

উত্তর:

36

স্ক্রিপ্ট ট্যাগের জন্য কোনও ত্রুটি ইভেন্ট নেই। এটি কখন সফল হবে তা আপনি বলতে পারবেন এবং ধরে নিতে পারেন যে এটি একটি সময়সীমা পেরিয়ে যাওয়ার পরেও লোড হয়নি:

<script type="text/javascript" onload="loaded=1" src="....js"></script>
— ডায়োডিয়াস - জেমস ম্যাকফার্লেন
সূত্র
7
জাভাস্ক্রিপ্ট ত্রুটি থাকলেও "অনলোড" শ্রোতাকে বরখাস্ত করা হবে।
— লুকা ম্যাটেইস
38
ঠিক আছে, হ্যাঁ যদি ফাইলটি LOADS হয় এবং ফাইলটিতে নিজেই একটি ত্রুটি থাকে তবে যদি ফাইলটি পরিবেশন না করা হয় তবে অনলোড কখনই চালিত হবে না।
— ডায়োডিয়াস - জেমস ম্যাকফার্লেন
1
হ্যাঁ, সত্য, সে কারণেই আমি কী ধরণের ত্রুটি খুঁজছি সে সম্পর্কে আরও সুনির্দিষ্ট হতে বলেছি।
— লুকা ম্যাটেইস
1
কিন্তু সময়সীমাটি পৃষ্ঠার কোডার দ্বারা সরবরাহ করা উচিত? সুতরাং কোডারটি ব্রাউজারে আলাদা টাইমআউট বেছে নিতে পারে, স্ক্রিপ্টটির লোড সময়সীমা ধরে নিয়েছিল এবং তারপরে এটি কিছুটা পরে সফল হতে পারে। অথবা না?
— হিপ্পিট্রেইল
6
স্ক্রিপ্ট ট্যাগের জন্য ওনাররর ইভেন্ট রয়েছে। রিসোর্স না পাওয়া গেলে এটি আগুন ধরিয়ে দেবে।
— Nguyen Tran
24

যদি আপনি কেবল এইচটিএমএল 5 ব্রাউজারগুলির বিষয়ে চিন্তা করেন তবে আপনি ত্রুটি ইভেন্টটি ব্যবহার করতে পারেন (যেহেতু এটি কেবল ত্রুটি পরিচালনার জন্য, তাই কেবলমাত্র জিএসএস আইএমএইচওর জন্য পরবর্তী জেনার ব্রাউজারগুলিতে এটি সমর্থন করা ঠিক হবে)।

অনুমান থেকে:

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

~

যদি লোডের ফলে ত্রুটি ঘটে (উদাহরণস্বরূপ একটি ডিএনএস ত্রুটি, বা এইচটিটিপি 404 ত্রুটি) স্ক্রিপ্ট ব্লকটি কার্যকর করাতে অবশ্যই উপাদানটিতে ত্রুটিযুক্ত একটি সাধারণ ইভেন্টকে গুলি চালানোতে হবে।

এর অর্থ আপনাকে কোনও ত্রুটিযুক্ত প্রবণতা পোষণ করতে হবে না এবং স্ক্রিপ্ট পৃষ্ঠা রেন্ডারিংয়ে ব্লক করছে না তা নিশ্চিত করার জন্য এটি এ্যাসিঙ্ক এবং ডিফার অ্যাট্রিবিউটের সাথে একত্রিত করতে পারেন:

ডিফার অ্যাট্রিবিউটটি নির্দিষ্ট করা যেতে পারে যদিও অ্যাসিঙ্ক অ্যাট্রিবিউট নির্দিষ্ট করা থাকে, লেগ্যাসি ওয়েব ব্রাউজারগুলির জন্য যে কেবলমাত্র ডিফারকে সমর্থন করে (এবং অ্যাসিঙ্ক নয়) ডিফল্টরূপে সিঙ্ক্রোনাস ব্লকিং আচরণের পরিবর্তে পিছনে আচরণে ফিরে যেতে পারে।

Http://www.w3.org/TR/html5/scriptting-1.html#script এ আরও

— andrerom
সূত্র
1
জেএসএনপি বাস্তবায়নের কোনও ধারণা, এর মতো jQuery এটিকে সমর্থন করে? JSONP লোড করতে ব্যর্থ হয়েছে তা সনাক্ত করার জন্য আমি এখানে যা যা পড়েছি তা বলছে এটি সনাক্ত করা যায় না তবে একটি সময়সীমা কার্যকরী হতে পারে এবং জেএসওএনপি-র সাম্প্রতিক সংস্করণে একটি টাইমআউট যুক্ত হয়েছিল। দেখে মনে হচ্ছে এই উত্তরটি সময়সীমার চেয়ে ভাল কিছু সরবরাহ করেছে - এটি কি সঠিক?
— হিপ্পিট্রেইল
1
উদাহরণস্বরূপ সম্ভব?
— রজারডপ্যাক
13
<script src="nonexistent.js" onerror="alert('error!')"></script> বেহালার
— Rudey
@ রুডি Uncaught SyntaxError: Unexpected token '<'(সর্বশেষ ক্রোমে)
— ডেলিজেম
@ ডালিয়েজেম শোনায় আপনি জাভাস্ক্রিপ্টে এইচটিএমএল ট্যাগ লাগানোর চেষ্টা করেছেন। <script src="nonexistent.js" onerror="alert('error!')"></script>আপনার এইচটিএমএল ফাইলে যাওয়া উচিত, জেএস নয়।
— রুডি
21

এরউইনাসের স্ক্রিপ্টটি দুর্দান্ত কাজ করে তবে খুব স্পষ্টভাবে কোড করা হয়নি। আমি এটি পরিষ্কার করে এবং এটি কী করছে তা বোঝাতে স্বাধীনতা নিয়েছি। আমি এই পরিবর্তনগুলি করেছি:

  • অর্থপূর্ণ পরিবর্তনশীল নাম
  • এর ব্যবহার prototype।
  • require() একটি আর্গুমেন্ট ভেরিয়েবল ব্যবহার করে
  • কোনও alert()বার্তা ডিফল্টরূপে ফিরে আসে না
  • আমি পাচ্ছিলাম কিছু সিনট্যাক্স ত্রুটি এবং স্কোপ সমস্যা স্থির করে

ইরভিনাসকে আবারও ধন্যবাদ, কার্যকারিতাটি নিজেই স্পটে।

function ScriptLoader() {
}

ScriptLoader.prototype = {

    timer: function (times, // number of times to try
                     delay, // delay per try
                     delayMore, // extra delay per try (additional to delay)
                     test, // called each try, timer stops if this returns true
                     failure, // called on failure
                     result // used internally, shouldn't be passed
            ) {
        var me = this;
        if (times == -1 || times > 0) {
            setTimeout(function () {
                result = (test()) ? 1 : 0;
                me.timer((result) ? 0 : (times > 0) ? --times : times, delay + ((delayMore) ? delayMore : 0), delayMore, test, failure, result);
            }, (result || delay < 0) ? 0.1 : delay);
        } else if (typeof failure == 'function') {
            setTimeout(failure, 1);
        }
    },

    addEvent: function (el, eventName, eventFunc) {
        if (typeof el != 'object') {
            return false;
        }

        if (el.addEventListener) {
            el.addEventListener(eventName, eventFunc, false);
            return true;
        }

        if (el.attachEvent) {
            el.attachEvent("on" + eventName, eventFunc);
            return true;
        }

        return false;
    },

    // add script to dom
    require: function (url, args) {
        var me = this;
        args = args || {};

        var scriptTag = document.createElement('script');
        var headTag = document.getElementsByTagName('head')[0];
        if (!headTag) {
            return false;
        }

        setTimeout(function () {
            var f = (typeof args.success == 'function') ? args.success : function () {
            };
            args.failure = (typeof args.failure == 'function') ? args.failure : function () {
            };
            var fail = function () {
                if (!scriptTag.__es) {
                    scriptTag.__es = true;
                    scriptTag.id = 'failed';
                    args.failure(scriptTag);
                }
            };
            scriptTag.onload = function () {
                scriptTag.id = 'loaded';
                f(scriptTag);
            };
            scriptTag.type = 'text/javascript';
            scriptTag.async = (typeof args.async == 'boolean') ? args.async : false;
            scriptTag.charset = 'utf-8';
            me.__es = false;
            me.addEvent(scriptTag, 'error', fail); // when supported
            // when error event is not supported fall back to timer
            me.timer(15, 1000, 0, function () {
                return (scriptTag.id == 'loaded');
            }, function () {
                if (scriptTag.id != 'loaded') {
                    fail();
                }
            });
            scriptTag.src = url;
            setTimeout(function () {
                try {
                    headTag.appendChild(scriptTag);
                } catch (e) {
                    fail();
                }
            }, 1);
        }, (typeof args.delay == 'number') ? args.delay : 1);
        return true;
    }
};

$(document).ready(function () {
    var loader = new ScriptLoader();
    loader.require('resources/templates.js', {
        async: true, success: function () {
            alert('loaded');
        }, failure: function () {
            alert('NOT loaded');
        }
    });
});
— আরম কোচার্যন
সূত্র
4
আমি jQuery এর get .GETScript ব্যবহার করতে বাধ্য হয়েছিল , কারণ এই ফাংশনটি MSIE8- তে ক্যাশে স্ক্রিপ্টগুলির জন্য ব্যর্থ হয়েছিল, দুর্ভাগ্যক্রমে
— জাথ্রস রাইটার
@ জাথ্রুস রাইটার এটি সম্ভবত আরও ভাল ধারণা, আমাদের জানানোর জন্য ধন্যবাদ! আপনি সম্ভবত এই কোডটিতে ইউআরএল এ একটি র্যান্ডম ইন্ট যোগ করতে পারেন এবং এটি ক্যাচিং সরিয়ে ফেলবে।
— আরম কোচার্যন
2
হ্যাঁ আরাম, এটি অবশ্যই কৌশলটি করবে, তবে এটি ব্রাউজারের
— ক্যাচিংকেও
@ জাথ্রুস রাইটার, সুতরাং jQuery বাস্তবায়নের কাজগুলি কীভাবে কাজ করে?
— পেসারিয়ার
@ পেসারিয়ার দুঃখিত, আমি কোনও জকিউরি কোর বিকাশকারী নই, তাই আমি সত্যিই এর উত্তর দিতে পারি না
— জাথ্রাস লেখক
18

আমার পরিস্কার পরিচ্ছন্ন সমাধান (2017)

function loaderScript(scriptUrl){
   return new Promise(function (res, rej) {
    let script = document.createElement('script');
    script.src = scriptUrl;
    script.type = 'text/javascript';
    script.onError = rej;
    script.async = true;
    script.onload = res;
    script.addEventListener('error',rej);
    script.addEventListener('load',res);
    document.head.appendChild(script);
 })

}

মার্টিন যেমন উল্লেখ করেছেন, তেমন ব্যবহার করা হয়েছে:

const event = loaderScript("myscript.js")
  .then(() => { console.log("loaded"); })
  .catch(() => { console.log("error"); });

অথবা 

try{
 await loaderScript("myscript.js")
 console.log("loaded"); 
}catch{
 console.log("error");
}
— পেরি মিমন
সূত্র
1
এটি নিম্নলিখিত হিসাবে ব্যবহার করুন:loaderScript("myscript.js").then(() => { console.log("loaded"); }).catch(() => { console.log("error"); });
— মার্টিন চান
17

আমি জানি এটি একটি পুরানো থ্রেড তবে আমি আপনার কাছে একটি দুর্দান্ত সমাধান পেয়েছি (আমার মনে হয়)। এটি আমার এক শ্রেণীর থেকে অনুলিপি করা হয়েছে, এটি সমস্ত AJAX স্টাফ পরিচালনা করে।

যখন স্ক্রিপ্টটি লোড করা যায় না, এটি একটি ত্রুটি হ্যান্ডলার সেট করে তবে ত্রুটি হ্যান্ডলারটি সমর্থিত না হলে এটি টাইমারে ফিরে যায় যা 15 সেকেন্ডের জন্য ত্রুটিগুলি পরীক্ষা করে।

function jsLoader()
{
    var o = this;

    // simple unstopable repeat timer, when t=-1 means endless, when function f() returns true it can be stopped
    o.timer = function(t, i, d, f, fend, b)
    {
        if( t == -1 || t > 0 )
        {
            setTimeout(function() {
                b=(f()) ? 1 : 0;
                o.timer((b) ? 0 : (t>0) ? --t : t, i+((d) ? d : 0), d, f, fend,b );
            }, (b || i < 0) ? 0.1 : i);
        }
        else if(typeof fend == 'function')
        {
            setTimeout(fend, 1);
        }
    };

    o.addEvent = function(el, eventName, eventFunc)
    {
        if(typeof el != 'object')
        {
            return false;
        }

        if(el.addEventListener)
        {
            el.addEventListener (eventName, eventFunc, false);
            return true;
        }

        if(el.attachEvent)
        {
            el.attachEvent("on" + eventName, eventFunc);
            return true;
        }

        return false;
    };

    // add script to dom
    o.require = function(s, delay, baSync, fCallback, fErr)
    {
        var oo = document.createElement('script'),
        oHead = document.getElementsByTagName('head')[0];
        if(!oHead)
        {
            return false;
        }

        setTimeout( function() {
            var f = (typeof fCallback == 'function') ? fCallback : function(){};
            fErr = (typeof fErr == 'function') ? fErr : function(){
                alert('require: Cannot load resource -'+s);
            },
            fe = function(){
                if(!oo.__es)
                {
                    oo.__es = true;
                    oo.id = 'failed';
                    fErr(oo);
                }
            };
            oo.onload = function() {
                oo.id = 'loaded';
                f(oo);
            };
            oo.type = 'text/javascript';
            oo.async = (typeof baSync == 'boolean') ? baSync : false;
            oo.charset = 'utf-8';
            o.__es = false;
            o.addEvent( oo, 'error', fe ); // when supported

            // when error event is not supported fall back to timer
            o.timer(15, 1000, 0, function() {
                return (oo.id == 'loaded');
            }, function(){ 
                if(oo.id != 'loaded'){
                    fe();
                }
            });
            oo.src = s;
            setTimeout(function() {
                try{
                    oHead.appendChild(oo);
                }catch(e){
                    fe();
                }
            },1); 
        }, (typeof delay == 'number') ? delay : 1);  
        return true;
    };

}

$(document).ready( function()
{
    var ol = new jsLoader();
    ol.require('myscript.js', 800, true, function(){
        alert('loaded');
    }, function() {
        alert('NOT loaded');
    });
});
— Codebeat
সূত্র
4
... jQuery কোথা থেকে এসেছে?
— নফতালি ওরফে নীল
1
এছাড়াও, এটি ক্রস-ব্রাউজার সমাধান ;-)
— কোডবিট
1
@ ইরভিনাস আমি শিরোনামগুলি পরীক্ষা করে দেখিনি, এটি কেবল একটি দ্রুত ক্রস ব্রাউজার চেক ছিল যা আমি সম্পাদন করেছি এবং get .গ্যাসস্ক্রিপ্ট সবসময় সমস্যা ছাড়াই চলত, তাই আমি এটির সাথে আটকে গেলাম ... নিজেকে চেষ্টা করার জন্য আপনাকে স্বাগতম! আমি W7 ব্যবহার করছি এবং
— এক্সএএমপিপি
19
এটি কাজ করে বা না করে, এটি পড়ার জন্য বেদনাদায়ক ned এটি বেশ দরিদ্র বিন্যাস এবং সত্যই নৃশংস কোডিং শৈলী। ভেরিয়েবলের নামকরণ একাই গোলযোগ।
— Thor84no
7
আপনি যদি পঠনযোগ্য কোডের মান না দেখেন (এবং আপনি আসলে সম্পাদিত কোডে কোনও পরিবর্তন ছাড়াই সেই পাঠযোগ্য করে তুলতে পারেন), তবে আপনার এবং আপনার কোডের সাথে কাজ করতে হবে এমন একক ব্যক্তির জন্য আমি দুঃখিত।
— Thor84no
10

জাভাস্ক্রিপ্ট nonexistant.jsকোনও ত্রুটি ফিরে পেয়েছে কিনা তা যাচাই করতে আপনার http://fail.org/nonexistant.jsমতো ভেরিয়েবল যুক্ত করতে var isExecuted = true;হবে এবং স্ক্রিপ্ট ট্যাগটি লোড হওয়ার পরে এটি উপস্থিত কিনা তা পরীক্ষা করে দেখুন।

তবে আপনি যদি কেবল এটি পরীক্ষা করতে চান যে nonexistant.js404 ছাড়াই প্রত্যাবর্তিত হয়েছে (যার অর্থ এটি বিদ্যমান), আপনি একটি isLoadedচলক দিয়ে চেষ্টা করতে পারেন ...

var isExecuted = false;
var isLoaded = false;
script_tag.onload = script_tag.onreadystatechange = function() {
    if(!this.readyState ||
        this.readyState == "loaded" || this.readyState == "complete") {
        // script successfully loaded
        isLoaded = true;

        if(isExecuted) // no error
    }
}

এটি উভয় ক্ষেত্রেই কভার করবে।

— লুকা ম্যাটেইস
সূত্র
1
এটি কাজ করে, তবে সত্যিই আমি যা চাই তা করি না - সেক্ষেত্রে ব্যর্থতা কখনই কোনও ঘটনাকে আটকায় না। আমি কোনও ভেরিয়েবলের জন্য পোল করতে চাই না এবং যদি এটি কয়েক সেকেন্ড পরেও মিথ্যা হয় তবে অন-ব্যর্থ কলব্যাকটি ফায়ার করুন।
— ডেভিড
আপনি কোন ধরণের ত্রুটি পুনরুদ্ধার করার চেষ্টা করছেন? ব্যর্থতা লোড করতে? Nonexstant.js এ জাভাস্ক্রিপ্ট কার্যকর করতে ব্যর্থ? এইচটিটিপি রেসপন্স ত্রুটি? আরও বর্ণনামূলক দয়া করে।
— লুকা ম্যাটেইস 21
উপরের যে কোনওটি ভাল হবে। যদিও আমি 404 ত্রুটি সম্পর্কে বিশেষত যত্নশীল।
— ডেভিড
404, এর অর্থ আপনি যাচাই করতে চান ফাইলটি অজানাবাদী.জেএস বিদ্যমান নেই কিনা? তবে এটি যদি কোনও ত্রুটি ফিরে আসে কিনা তা আপনি পরীক্ষা করতে চান?
— লুকা ম্যাটেইস
ওহে ডেভিড, আপনি ধরে নিতে সক্ষম হবেন যে যদি এটি.ডিয়ারস্টেট / ... সত্য না হয় তবে স্ক্রিপ্টটি লোড করতে ব্যর্থ হয়েছিল। মূলত একটি অনারআর।
— কোডি
7

আমি আশা করি এটি হ্রাস পাবে না, কারণ বিশেষ পরিস্থিতিতে সমস্যা সমাধানের এটি সবচেয়ে নির্ভরযোগ্য উপায়। সার্ভারটি যে কোনও সময় আপনাকে সিওআরএস ব্যবহার করে জাভাস্ক্রিপ্ট রিসোর্স পেতে দেয় ( http://en.wikedia.org/wiki/Cross-origin_resource_sharing ), আপনার কাছে এটি করার জন্য প্রচুর বিকল্প রয়েছে।

সংস্থানগুলি আনতে XMLHttpRequest ব্যবহার করা IE সহ সমস্ত আধুনিক ব্রাউজারে কাজ করবে। যেহেতু আপনি জাভাস্ক্রিপ্ট লোড করতে খুঁজছেন, আপনার কাছে জাভাস্ক্রিপ্ট প্রথম স্থানে উপলব্ধ। আপনি রেডিস্টেট ব্যবহার করে অগ্রগতি ট্র্যাক করতে পারেন ( http://en.wikedia.org/wiki/XMLHttpRequest#The_onreadystatechange_event_listener )। অবশেষে, একবার আপনি ফাইলটির সামগ্রী পেয়ে গেলে, আপনি এভাল () এর মাধ্যমে এটি সম্পাদন করতে পারেন। হ্যাঁ, আমি স্পষ্টভাবে বলেছি - কারণ সুরক্ষার ভিত্তিতে এটি স্ক্রিপ্টটি সাধারণত লোড করা থেকে আলাদা নয়। প্রকৃতপক্ষে, অনুরূপ কৌশলটি রেসিগ দ্বারা সুন্দর ট্যাগগুলি রাখার পরামর্শ দিয়েছেন ( http://ejohn.org/blog/degrading-script-tags/ )।

এই পদ্ধতিটি আপনাকে ইওল থেকে লোডটি আলাদা করতে দেয় এবং বিবর্তনের আগে এবং পরে কার্য সম্পাদন করে। সমান্তরালে স্ক্রিপ্টগুলি লোড করার পরে এটি একের পর এক মূল্যায়নের ক্ষেত্রে কার্যকর হয় - আপনি যখন এইচটিএমএলতে ট্যাগগুলি রাখেন তখন কিছু ব্রাউজার সহজেই করতে পারে তবে জাভাস্ক্রিপ্টের সাথে রান-টাইমে স্ক্রিপ্টগুলি যুক্ত করে আপনাকে এড়াতে দেবে না।

স্ক্রিপ্টগুলি লোড করার জন্য সিওআরএস জেএসওএনপি-র কাছেও পছন্দনীয় ( http://en.wikedia.org/wiki/XMLHttpRequest#Cross-domain_requests )। তবে, আপনি যদি নিজের সাইটে তৃতীয় পক্ষের উইজেটগুলি অন্য সাইটে এম্বেড করার জন্য বিকাশ করছেন তবে আপনার নিজের ডোমেন থেকে জাভাস্ক্রিপ্ট ফাইলগুলি অবশ্যই নিজের আইফ্রেমে লোড করা উচিত (আবার, এজেএক্স ব্যবহার করে)

সংক্ষেপে:

  1. আপনি এজেএক্স জিইটি ব্যবহার করে সংস্থানটি লোড করতে পারেন কিনা তা দেখার চেষ্টা করুন

  2. এটি সফলভাবে লোড হওয়ার পরে eval ব্যবহার করুন

এটি উন্নত করতে:

  1. পাঠানো হচ্ছে ক্যাশে-নিয়ন্ত্রণ শিরোনাম পরীক্ষা করে দেখুন

  2. অন্যথায় আপনার প্রয়োজন হলে লোকালস্টোরেজে কন্টেন্টটি ক্যাশে করে দেখুন

  3. ক্লিনার কোডের জন্য রেজিগের "অবনমিত জাভাস্ক্রিপ্ট" দেখুন

  4. প্রয়োজনীয়.js দেখুন

— গ্রেগরি মাগারশাক
সূত্র
এনবি যে এইভাবে সিওআরএস সক্ষম করার জন্য মূল সার্ভারের প্রয়োজন, যা সর্বদা ক্ষেত্রে বা নিয়ন্ত্রণযোগ্য নয়: |
— রজারডপ্যাক
5

এই কৌশলটি আমার পক্ষে কাজ করেছিল, যদিও আমি স্বীকার করি যে এই সমস্যাটি সমাধান করার সম্ভবত এটি সর্বোত্তম উপায় নয়। এটি চেষ্টা করার পরিবর্তে, আপনার জাভাস্ক্রিপ্টগুলি কেন লোড হচ্ছে না তা দেখতে হবে। আপনার সার্ভারে স্ক্রিপ্টের স্থানীয় অনুলিপি রাখার চেষ্টা করুন etc.

যাইহোক, সুতরাং এখানে কাজটি সমালোচনা করুন: 1) ভেরিয়েবলটিকে মিথ্যা হিসাবে সূচনা করুন 2) জাভাস্ক্রিপ্টটি লোড হয়ে গেলে (সত্যতাটি ব্যবহার করে) 3) এইচটিএমএল বডিটি লোড হয়ে গেলে ভেরিয়েবলটি সত্য বা মিথ্যা কিনা তা পরীক্ষা করুন

<html>
  <head>
    <script>
      var scriptLoaded = false;

      function checkScriptLoaded() {
        if (scriptLoaded) {
          // do something here
        } else {
          // do something else here!
        }
      }
    </script>
    <script src="http://some-external-script.js" onload="scriptLoaded=true;" />
  </head>
  <body onload="checkScriptLoaded()">
    <p>My Test Page!</p>
  </body>
</html>
— গৌতম টন্ডন
সূত্র
1
যদি স্ক্রিপ্টটি এখনও লোড হয়? ফাইলটি পাওয়া না গেলে আপনি কীভাবে জানবেন বা আপনাকে অপেক্ষা করতে হবে?
— osa
এই সমাধানটি আমার পরীক্ষায় কাজ করে, যতক্ষণ না স্ক্রিপ্ট ট্যাগটি সরাসরি নথির উত্সে রাখা হয়। পৃষ্ঠার উত্সে রেফারেন্সযুক্ত সমস্ত সংস্থান ইতিমধ্যে লোড হওয়া (বা ব্যর্থ) না হওয়া পর্যন্ত নথির অনলোড ইভেন্টটি আগুন দেয় না। আপনার যদি পরে ডিওএম-এ স্ক্রিপ্টগুলি সন্নিবেশ করা প্রয়োজন তবে আপনাকে অন্য পদ্ধতির প্রয়োজন।
— জামে শার্প
দুর্দান্ত সমাধান। আমি কেন বুঝতে পারছি না কেন এটি উত্সাহ দেওয়া হয়নি।
— লোটফি
এটি ধরে নিয়েছে যে স্ক্রিপ্টটি সমস্ত কিছু সিঙ্ক্রোনালিভাবে অন্য সমস্ত কিছুকে ব্লক করা হবে, যা সর্বদা সত্য নয়। আসলে, এটি স্ক্রিপ্টগুলি লোড করার প্রস্তাবিত উপায় নয়।
— ভিটিম.ইস
4

এখানে কোনও টাইমার ছাড়াই অন্য জিকুয়ারি ভিত্তিক সমাধান:

<script type="text/javascript">
function loadScript(url, onsuccess, onerror) {
$.get(url)
    .done(function() {
        // File/url exists
        console.log("JS Loader: file exists, executing $.getScript "+url)
        $.getScript(url, function() {
            if (onsuccess) {
                console.log("JS Loader: Ok, loaded. Calling onsuccess() for " + url);
                onsuccess();
                console.log("JS Loader: done with onsuccess() for " + url);
            } else {
                console.log("JS Loader: Ok, loaded, no onsuccess() callback " + url)
            }
        });
    }).fail(function() {
            // File/url does not exist
            if (onerror) {
                console.error("JS Loader: probably 404 not found. Not calling $.getScript. Calling onerror() for " + url);
                onerror();
                console.error("JS Loader: done with onerror() for " + url);
            } else {
                console.error("JS Loader: probably 404 not found. Not calling $.getScript. No onerror() callback " + url);
            }
    });
}
</script>

ধন্যবাদ: https://stackoverflow.com/a/14691735/1243926

নমুনা ব্যবহার ( জিকুয়েরি থেকে প্রাপ্ত স্ক্রিপ্ট ডকুমেন্টেশন থেকে আসল নমুনা ):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript demo</title>
  <style>
  .block {
     background-color: blue;
     width: 150px;
     height: 70px;
     margin: 10px;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<button id="go">&raquo; Run</button>
<div class="block"></div>

<script>


function loadScript(url, onsuccess, onerror) {
$.get(url)
    .done(function() {
        // File/url exists
        console.log("JS Loader: file exists, executing $.getScript "+url)
        $.getScript(url, function() {
            if (onsuccess) {
                console.log("JS Loader: Ok, loaded. Calling onsuccess() for " + url);
                onsuccess();
                console.log("JS Loader: done with onsuccess() for " + url);
            } else {
                console.log("JS Loader: Ok, loaded, no onsuccess() callback " + url)
            }
        });
    }).fail(function() {
            // File/url does not exist
            if (onerror) {
                console.error("JS Loader: probably 404 not found. Not calling $.getScript. Calling onerror() for " + url);
                onerror();
                console.error("JS Loader: done with onerror() for " + url);
            } else {
                console.error("JS Loader: probably 404 not found. Not calling $.getScript. No onerror() callback " + url);
            }
    });
}


loadScript("https://raw.github.com/jquery/jquery-color/master/jquery.color.js", function() {
  console.log("loaded jquery-color");
  $( "#go" ).click(function() {
    $( ".block" )
      .animate({
        backgroundColor: "rgb(255, 180, 180)"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "olive"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "#00f"
      }, 1000 );
  });
}, function() { console.error("Cannot load jquery-color"); });


</script>
</body>
</html>
— OSA
সূত্র
ভাল সার্জি! সুতরাং, আপনি ফাইলটি বিদ্যমান কিনা তা পরীক্ষা করতে .get () ব্যবহার করছেন এবং .getScript () এটি ত্রুটি ছাড়াই চালানো / লোড করা যায় কিনা তা পরীক্ষা করে দেখুন?
— jjwdesign
2
হ্যাঁ. যেমনটি আমি স্মরণ করি, এই পদ্ধতির সীমাবদ্ধতা রয়েছে: ক্রস-ডোমেন স্ক্রিপ্টিং বিধিনিষেধের কারণে আপনি যদি এইভাবে অনেকগুলি স্ক্রিপ্টগুলি লোড করতে সক্ষম হবেন না remember
— osa
JQuery (বা অন্য কোনও গ্রন্থাগার) ব্যবহার করে সমস্যা হ'ল আপনাকে প্রথমে সেই লাইব্রেরিটি লোড করা দরকার। সুতরাং আপনি কীভাবে পরীক্ষা করতে পারেন যে সেই লাইব্রেরিটি লোড করতে ব্যর্থ হয়েছে?
— পেসারিয়ার
আমি এই পদ্ধতিটিও গ্রহণ করেছি, তবে আমি cache:trueget .getScript কলটির জন্য ব্যবহার করার পরামর্শ দিচ্ছি (এটি ডিফল্টরূপে বন্ধ) is এইভাবে, বেশিরভাগ অনুরোধের জন্য, এটি স্বয়ংক্রিয়ভাবে গেটস্ক্রিপ্ট কলটির জন্য ক্যাশেড সংস্করণ ব্যবহার করে (আপনার বিলম্বকে বাঁচায়)
— লরেন্স
2

প্রতিশ্রুতি ব্যবহার করে এটি নিরাপদে করা যায়

function loadScript(src) {
  return new Promise(function(resolve, reject) {
    let script = document.createElement('script');
    script.src = src;

    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error("Script load error: " + src));

    document.head.append(script);
  });
}

এবং এই মত ব্যবহার করুন

let promise = loadScript("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js");

promise.then(
  script => alert(`${script.src} is loaded!`),
  error => alert(`Error: ${error.message}`)
);
— নিতিন চন্দ্রন
সূত্র
1

সাফারিটিতে এটি কাজ না করার কারণ হ'ল আপনি অ্যাট্রিবিউট সিনট্যাক্স ব্যবহার করছেন। এটি যদিও ভাল কাজ করবে:

script_tag.addEventListener('error', function(){/*...*/}, true);

... আইই বাদে

আপনি যদি স্ক্রিপ্টটি সফলভাবে সম্পাদন করতে চান, কেবল সেই স্ক্রিপ্টটি ব্যবহার করে একটি পরিবর্তনশীল সেট করুন এবং এটি বাইরের কোডে সেট করা আছে কিনা তা পরীক্ষা করে দেখুন।

এটি সাফারির পক্ষে আসলে কোনও তাত্পর্যপূর্ণ করে না - এটি ত্রুটি হ্যান্ডলারটিকে এখনও চালিত করে না।
— ডেভিড
আমার সাফারিতে অনক্লিক হ্যান্ডলারের সমস্যা ছিল এবং এটিই এটি স্থির করেছিল, তাই আমি ভেবেছিলাম যে এটি অনারারের ক্ষেত্রেও একই হবে। আপাতদৃষ্টিতে নয় ...
1
স্ট্যাটিকালি অন্তর্ভুক্ত স্ক্রিপ্ট ট্যাগগুলির জন্যও কি এই কাজ করা উচিত, বা কেবল গতিশীলভাবে ইনজেকশন দেওয়া উচিত? JQuery লোড করতে ব্যর্থ হয়েছে তবে এটি কার্যকর হয়নি তা সনাক্ত করার জন্য আমি এটি ব্যবহার করার চেষ্টা করেছি। আমি নিশ্চিত না যে আমি এটি ভুল করছি বা এটি কেবল এই ক্ষেত্রে কাজ করে না।
— হিপ্পিট্রেইল
1
@ হিপ্পিট্রেইল - কোনও ইভেন্ট শ্রোতা কখনও স্থির এইচটিএমএলে কাজ করবে না <script>। আপনি যদি এটির আগে যুক্ত করার চেষ্টা করেন তবে আপনি একটি ত্রুটি পেয়ে গেছেন যে ট্যাগটি নেই and স্ক্রিপ্ট দ্বারা সৃষ্ট পার্শ্ব প্রতিক্রিয়া সন্ধানের একমাত্র উপায়।
ধন্যবাদ ফ্লুসেন্স খুব খারাপ যে এটি কেবল 404 এর জন্য কাজ করে, জেএস ত্রুটির জন্য নয়। স্ক্রিপ্টের ভিতরে একটি ভেরিয়েবল সেট করা সর্বদা অনুশীলনযোগ্য নয়।
— জো লিস
0

এটি একটি সময়সীমা নির্ধারণ এবং তারপরে একটি সময়সীমা শেষে লোড ব্যর্থতা অনুমান করার প্রস্তাব দেওয়া হয়েছিল।

setTimeout(fireCustomOnerror, 4000);

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

যদি অনুরোধটি বাতিল হতে পারে, তবে প্রোগ্রামটি একটি সময়ের জন্য অপেক্ষা করতে পারে, তারপরে অনুরোধটি বাতিল করুন।

— গ্যারেট
সূত্র
0

উইন্ডো অবজেক্টে লোড হওয়া ত্রুটিগুলি সনাক্ত করার জন্য আমি এইভাবে প্রতিশ্রুতি ব্যবহার করেছি:

<script type='module'>
window.addEventListener('error', function(error) {
  let url = error.filename
  url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));
  url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));
  url = url.substring(url.lastIndexOf("/") + 1, url.length);
  window.scriptLoadReject && window.scriptLoadReject[url] && window.scriptLoadReject[url](error);
}, true);
window.boot=function boot() {
  const t=document.createElement('script');
  t.id='index.mjs';
  t.type='module';
  new Promise((resolve, reject) => {
    window.scriptLoadReject = window.scriptLoadReject || {};
    window.scriptLoadReject[t.id] = reject;
    t.addEventListener('error', reject);
    t.addEventListener('load', resolve); // Careful load is sometimes called even if errors prevent your script from running! This promise is only meant to catch errors while loading the file.
  }).catch((value) => {
    document.body.innerHTML='Error loading ' + t.id + '! Please reload this webpage.<br/>If this error persists, please try again later.<div><br/>' + t.id + ':' + value.lineno + ':' + value.colno + '<br/>' + (value && value.message);
  });
  t.src='./index.mjs'+'?'+new Date().getTime();
  document.head.appendChild(t);
};
</script>
<script nomodule>document.body.innerHTML='This website needs ES6 Modules!<br/>Please enable ES6 Modules and then reload this webpage.';</script>
</head>

<body onload="boot()" style="margin: 0;border: 0;padding: 0;text-align: center;">
  <noscript>This website needs JavaScript!<br/>Please enable JavaScript and then reload this webpage.</noscript>
— মি জি
সূত্র
0

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

— nickjsify
সূত্র
এই সমাধানটি আধুনিক ব্রাউজারগুলির সাথে অচল।
— সাইমন_উইভার
0

অনার ইভেন্ট

* আগস্ট 2017 আপডেট করুন: ক্রোম এবং ফায়ারফক্সের মাধ্যমে অনারার চালিত হয়েছে। ইন্টারনেট এক্সপ্লোরার দ্বারা লোড চালিত হয়। এজ অরররর বা অনলোডকেও আগুন দেয়। আমি এই পদ্ধতিটি ব্যবহার করব না তবে এটি কিছু ক্ষেত্রে কাজ করতে পারে। আরো দেখুন

<লিঙ্ক> অনিরর আইই তে কাজ করে না

*

সংজ্ঞা এবং ব্যবহার বাহ্যিক ফাইল (যেমন একটি নথি বা একটি চিত্র) লোড করার সময় কোনও ত্রুটি ঘটলে অনারআর ইভেন্টটি ট্রিগার করা হয়।

টিপ: অডিও / ভিডিও মিডিয়াতে ব্যবহার করার সময়, মিডিয়া লোডিংয়ের প্রক্রিয়াটিতে কোনও ধরণের ঝামেলা দেখা দিলে সম্পর্কিত ঘটনাগুলি হ'ল:

  • onabort
  • onemptied
  • onstalled
  • onsuspend

এইচটিএমএলে:

উপাদান onerror = "মাইস্ক্রিপ্ট">

জাভাস্ক্রিপ্টে , অ্যাডভেন্টলিস্টনার () পদ্ধতিটি ব্যবহার করে:

object.addEventListener ("ত্রুটি", মাইস্ক্রিপ্ট);

দ্রষ্টব্য: অ্যাডএভেন্টলিস্টনার () পদ্ধতিটি ইন্টারনেট এক্সপ্লোরার 8 এবং পূর্ববর্তী সংস্করণগুলিতে সমর্থিত নয়।

উদাহরণ একটি জাভাস্ক্রিপ্ট কার্যকর করুন যদি কোনও চিত্র লোড করার সময় কোনও ত্রুটি ঘটে:

img src = "image.gif" onerror = "myFunction ()">

— উইলিয়াম মোহনাহান
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.