jQuery .load () কলটি লোড হওয়া HTML ফাইলটিতে জাভাস্ক্রিপ্ট চালায় না


83

এটি কেবল সাফারি সম্পর্কিত একটি সমস্যা বলে মনে হচ্ছে। আমি ম্যাকের জন্য 4 এবং উইন্ডোজে 3 চেষ্টা করেছি এবং এখনও আমার ভাগ্য নেই।

আমি একটি বাহ্যিক এইচটিএমএল ফাইল লোড করার চেষ্টা করছি এবং জাভাস্ক্রিপ্ট রয়েছে যা এম্বেড করা কার্যকর করা হবে।

আমি যে কোডটি ব্যবহার করার চেষ্টা করছি তা হ'ল:

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html");
});

trackingCode.html এর মতো দেখতে (এখনই সহজ, তবে একবারে প্রসারিত হবে / যদি আমি এই কাজটি পাই তবে):

<html>
<head>
    <title>Tracking HTML File</title>
    <script language="javascript" type="text/javascript">
        alert("outside the jQuery ready");
        $(function() {
            alert("inside the jQuery ready");
        });
    </script>
</head>

<body>
</body>
</html>

আমি IE (6 এবং 7) এবং ফায়ারফক্স (2 এবং 3) এ উভয় সতর্কতা বার্তা দেখছি। তবে, আমি সাফারি (শেষ ব্রাউজারের সাথে আমার সম্পর্কিত হওয়া প্রয়োজন - প্রকল্পের প্রয়োজনীয়তা - দয়া করে কোনও শিখা যুদ্ধ নয়) বার্তাগুলি দেখতে পাচ্ছি না।

সাফারি কেন trackingCode.htmlফাইলটিতে জাভাস্ক্রিপ্ট উপেক্ষা করছে সে সম্পর্কে কোনও চিন্তা ?

শেষ পর্যন্ত আমি trackingCode.htmljQuery রেডি কলের মধ্যে জাভাস্ক্রিপ্ট অবজেক্টগুলি এই ফাইলটিতে ব্যবহার করতে সক্ষম হতে চাই, তবে আমি নিশ্চিত হতে চাই যে এই রাস্তায় নামার আগে সমস্ত ব্রাউজারগুলিতে এটি সম্ভব is

উত্তর:


56

আপনি এইচটিএমএল, হেড এবং বডি ট্যাগ সহ একটি সম্পূর্ণ HTML পৃষ্ঠা আপনার ডিভিতে লোড করছেন। আপনি যদি লোড করেন এবং এইচটিএমএল যে লোড হয় সেটিতে খোলার স্ক্রিপ্ট, সমাপনী স্ক্রিপ্ট এবং জাভাস্ক্রিপ্ট কোড থাকলে কী হবে?

এখানে ড্রাইভার পৃষ্ঠা:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery Load of Script</title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", "1.3.2");
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#myButton").click(function() {
                    $("#myDiv").load("trackingCode.html");
                });
             });
         </script>
    </head>
    <body>
        <button id="myButton">Click Me</button>
        <div id="myDiv"></div>
    </body>
</html>

ট্র্যাকিংকোড। Html এর সামগ্রীগুলি এখানে:

<script type="text/javascript">
    alert("Outside the jQuery ready");
    $(function() {
        alert("Inside the jQuery ready");
    });
 </script>

এটি আমার সাফারি 4 এ কাজ করে।

আপডেট: আমার পরীক্ষার পরিবেশের কোডটি মেলে ডিওটিটিইপিই এবং এইচটিএমএল নেমস্পেস যুক্ত করেছে। ফায়ারফক্স 3.6.13 এবং পরীক্ষিত কোড কোড কাজ করে।


4
বুঝেছি, টনি ধন্যবাদ! <html>, <হেড> এবং <body> ট্যাগগুলি মুছে ফেলা কৌশলটি মনে হচ্ছে।
মাইক

4
আমি বিচ্ছিন্ন ছিলাম আমার আলাদা ইজ্যাক্স কল জেজেসন () করা উচিত কিনা কারণ আমি এটি শুনেছি .. তবে এটি যদি এটির মতো কাজ করে তবে তা ঠিক আছে !! আমি একই প্রশ্নগুলিতে অন্যথায় দু'বার কল করব
গরিলাএপ

4
আপনার কোডটি আসলে এফএফ-এ কাজ করছে না (আইই 8 - ভাল কাজ করছে)। সমস্ত ব্রাউজারে এই কাজ করার কোনও উপায় আছে ? ধন্যবাদ

4
@ ম্যাক্সিম গালুশকা আমার ব্যক্তিগত ওয়ার্কস্টেশনে এখনও এই ফাইলগুলি ছিল। কোন পরিবর্তন ছাড়াই, তারা সঠিক আচরণ তৈরি করেছিল। আমি ফায়ারফক্স 3.6.13 উইন্ডোজ 7 এ ব্যবহার করছি
টনি মিলার

41
$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});

এটি আমার জন্য কৌশলটি করেছে। আপনি এখানে চেষ্টা করতে পারেন এমন একটি উদাহরণ এখানে রয়েছে: var frmAcademicCocolate = "frmAcademicCocolate.aspx" if (window.location.href.toLowerCase ()। লোড ( " example.com #externalContent", ফাংশন () {$ .getScript ( "example.js");}); }
ইভান

25

জন পিকের সমাধানের অন্য একটি সংস্করণ ঠিক আগে, এটি আমার পক্ষে ভাল কাজ করে:

jQuery.ajax({
   ....
   success: function(data, textStatus, jqXHR) {
       jQuery(selecteur).html(jqXHR.responseText);
       var reponse = jQuery(jqXHR.responseText);
       var reponseScript = reponse.filter("script");
       jQuery.each(reponseScript, function(idx, val) { eval(val.text); } );
   }
   ...
});

4
এটি সর্বোত্তম সমাধান !, I love you @Yannick, আপনি আমার দিন
utiq

15

আমি বুঝতে পারি এটি কিছুটা পুরানো পোস্ট, তবে এই পৃষ্ঠায় যে কেউ আসে তার জন্য অনুরূপ সমাধান খুঁজছেন ...

http://api.jquery.com/jQuery.getScript/

jQuery.getScript( url, [ success(data, textStatus) ] )
  • url - ইউআরএল যুক্ত একটি স্ট্রিং যাতে অনুরোধটি প্রেরণ করা হয়।

  • success(data, textStatus) - একটি কলব্যাক ফাংশন যা কার্যকর হয় যদি অনুরোধটি সফল হয়।

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

11

আপনি যদি এইচটিএমএল ফিল্ডটিকে গতিশীলভাবে তৈরি উপাদান হিসাবে লোড করেন তবে এটি কাজ করবে বলে মনে হচ্ছে না।

$('body').append('<div id="loader"></div>');
$('#loader').load('htmlwithscript.htm');

আমি ফায়ারব্যাগ ডিওএম দেখি এবং এখানে কোনও স্ক্রিপ্ট নোড নেই, কেবলমাত্র এইচটিএমএল এবং আমার সিএসএস নোড।

কেউ কি এই জুড়ে এসেছেন?


আমাকে এইচটিএমএল লোড করতে হয়েছিল, তারপরে কলব্যাকে জাভাস্ক্রিপ্ট পেতে $ .getScript ব্যবহার করুন।
ডেক্স

4
শহরবাসী! আপনি আমার সমস্যাটি প্রায় 8 বছর আগে সমাধান করেছেন। ধন্যবাদ: ডি
স্কোরেক

3

আপনি প্রায় পেয়েছেন। আপনি কেবল স্ক্রিপ্টটি লোড করতে চান জিকোরিটিকে বলুন:

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html script");
});

7
তবে এটি কেবলমাত্র লোড এবং স্ক্রিপ্ট বলে মনে হচ্ছে। আপনি কীভাবে এটি এইচটিএমএল সামগ্রী লোড করতে এবং এতে থাকা কোনও জাভাস্ক্রিপ্ট চালাতে পারেন?
ThatAintWorking


2

ট্র্যাকিংকোড। Html এ দিয়ে এটি পরীক্ষা করুন:

<script type="text/javascript">

    $(function() {

       show_alert();

       function show_alert() {
           alert("Inside the jQuery ready");
       }

    });
 </script>

1

আমি এটিতে ছুটে এসেছি যেখানে স্ক্রিপ্টগুলি একবার লোড হবে তবে পুনরাবৃত্তি কলগুলি স্ক্রিপ্টটি চালায় না।

এটি অপেক্ষা সূচক প্রদর্শনের জন্য .html () ব্যবহার করে এবং এরপরে। লোড () শৃঙ্খলাবদ্ধ করে তোলা একটি সমস্যা হয়ে দাঁড়িয়েছে।

// Processes scripts as expected once per page load, but not for repeat calls
$("#id").html("<img src=wait.gif>").load("page.html");

আমি যখন তাদের পৃথক কল করি, তখন আমার ইনলাইন স্ক্রিপ্টগুলি প্রত্যাশার মতো প্রতিবার লোড হয়।

// Without chaining html and load together, scripts are processed as expected every time
$("#id").html("<img src=wait.gif>");
$("#id").load("page.html");

আরও গবেষণার জন্য, নোট করুন যে লোড () এর দুটি সংস্করণ রয়েছে

একটি সহজ। লোড () কল (ইউআরএল-এর পরে কোনও নির্বাচক ছাড়াই) কেবল aj .জ্যাক্স () কে ডাটা টাইপের সাথে কল করার জন্য একটি শর্টহ্যান্ড হয়: "এইচটিএমএল" এবং ডিটারটিতে এই বিষয়বস্তু রাখার জন্য রিটার্নের সামগ্রীগুলি এবং html () কল করে h । এবং ডেটা টাইপের জন্য ডকুমেন্টেশন: "এইচটিএমএল" স্পষ্টভাবে উল্লেখ করে "অন্তর্ভুক্ত স্ক্রিপ্ট ট্যাগগুলি ডিওমে প্রবেশের সময় মূল্যায়ন করা হয়।" http://api.jquery.com/jquery.ajax/ সুতরাং। লোড () আনুষ্ঠানিকভাবে ইনলাইন স্ক্রিপ্টগুলি চালায়।

একটি জটিল। লোড () কলটিতে একটি নির্বাচক যেমন লোড ("পেজ এইচটিএমএল # কনটেন্ট") থাকে। যখন সেভাবে ব্যবহার করা হয়, jQuery উদ্দেশ্যমূলকভাবে স্ক্রিপ্ট ট্যাগগুলি ফিল্ট আউট করে যেমন এর মতো নিবন্ধগুলিতে আলোচিত হয়: https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 এক্ষেত্রে স্ক্রিপ্টগুলি কখনই না চালান, একবারও নয়।


1

আপনি যদি এইচটিএমএল এবং স্ক্রিপ্ট উভয়ই লোড করতে চান তবে এখানে $(selector).load()এবং উভয়কেই ব্যবহার করে করার জন্য আরও একটি স্বয়ংক্রিয় উপায় এখানে jQuery.getScript()। এই নির্দিষ্ট উদাহরণটি আইডি "টু লোড" দিয়ে উপাদানটির এইচটিএমএল সামগ্রীটি লোড করে content.html, আইডি "সামগ্রী" সহ উপাদানটিতে এইচটিএমএল সন্নিবেশ করায় এবং তারপরে "টু লোড" আইডি দিয়ে উপাদানটির মধ্যে সমস্ত স্ক্রিপ্ট লোড করে এবং চালায় runs

$("#content").load("content.html #toLoad", function(data) {
    var scripts = $(data).find("script");

    if (scripts.length) {
        $(scripts).each(function() {
            if ($(this).attr("src")) {
                $.getScript($(this).attr("src"));
            }
            else {
                eval($(this).html());
            }
        });
    }

});

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

আমি ক্রোমে এই পদ্ধতিটি পরীক্ষা করেছি এবং এটি কাজ করে। ব্যবহার করার সময় সতর্কতা অবলম্বন করুন eval, কারণ এটি সম্ভাব্য অনিরাপদ স্ক্রিপ্টগুলি চালাতে পারে এবং সাধারণত ক্ষতিকারক হিসাবে বিবেচিত হয়। এই পদ্ধতিটি ব্যবহার করার সময় আপনি এড়ানোর জন্য ইনলাইন স্ক্রিপ্টগুলি এড়াতে চাইতে পারেন eval


0

ঠিক আছে আমার একই সমস্যা ছিল যা কেবল ফায়ারফক্সের জন্যই ঘটেছে বলে মনে হয়েছিল এবং। লোড () ব্যতীত আমি আর জিকুয়েরি কমান্ডটি ব্যবহার করতে পারিনি যেহেতু আমি উপস্থিত থাকা পিএইচপি ফাইলগুলিতে সামনের প্রান্তটি পরিবর্তন করছি ...

যাইহোক,। লোড () কমান্ডটি ব্যবহার করার পরে, আমি আমার জিকুয়েরি স্ক্রিপ্টটি বহির্মুখী HTML এর মধ্যে এম্বেড করেছিলাম যা লোড হচ্ছে। আমি বুঝতে পারি না যে মূল নথির উপরে আমি যে জেএসটি লোড করেছি তা কেন নতুন সামগ্রীর জন্য কার্যকর হয়নি ...


সহজ, কারণ স্ক্রিপ্টটি কার্যকর হওয়ার সাথে সাথে নতুন সামগ্রীটি ছিল না।
ম্যাটিও


0

@ ফ্রিড উত্তরের দিকে নজর দেওয়া ...

আমি .load('mypage.html #theSelectorIwanted')নির্বাচক দ্বারা কোনও পৃষ্ঠা থেকে সামগ্রী কল করতে ব্যবহার করছিলাম তবে এর অর্থ এটি ভিতরে ইনলাইন স্ক্রিপ্টগুলি কার্যকর করে না।

পরিবর্তে, আমি আমার মার্কআপটি পরিবর্তন করতে সক্ষম হয়েছি যাতে '#theSelectorIwanted'এটি নিজের ফাইল হয়ে যায় এবং আমি ব্যবহার করি

load('theSelectorIwanted.html`, function() {}); 

এবং এটি ঠিকঠাক ইনলাইন স্ক্রিপ্টগুলি চালিয়েছিল।

সবার কাছে সেই বিকল্প নেই তবে আমি যেখানে চেয়েছি সেখানে পৌঁছানোর জন্য এটি দ্রুত কাজ ছিল!

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