lệnh gọi jQuery .load () không thực thi JavaScript trong tệp HTML đã tải

83

Đây dường như là một vấn đề chỉ liên quan đến Safari. Tôi đã thử 4 trên Mac và 3 trên Windows nhưng vẫn không gặp may.

Tôi đang cố tải một tệp HTML bên ngoài và có JavaScript được nhúng thực thi.

Mã tôi đang cố gắng sử dụng là:

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

trackingCode.html trông giống như sau (đơn giản bây giờ, nhưng sẽ mở rộng một lần / nếu tôi làm cho điều này hoạt động):

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

Tôi thấy cả hai thông báo cảnh báo trong IE (6 & 7) và Firefox (2 & 3). Tuy nhiên, tôi không thể xem các thông báo trong Safari (trình duyệt cuối cùng mà tôi cần quan tâm - các yêu cầu của dự án - vui lòng không có hỏa hoạn).

Bất kỳ suy nghĩ nào về việc tại sao Safari lại bỏ qua JavaScript trong trackingCode.htmltệp?

Cuối cùng, tôi muốn có thể chuyển các đối tượng JavaScript vào trackingCode.htmltệp này để được sử dụng trong lệnh gọi sẵn sàng của jQuery, nhưng tôi muốn đảm bảo rằng điều này có thể thực hiện được trong tất cả các trình duyệt trước khi tôi đi theo con đường đó.

jquery  ajax  safari 
— Mike
nguồn

Câu trả lời:

56

Bạn đang tải toàn bộ trang HTML vào div của mình, bao gồm các thẻ html, head và body. Điều gì xảy ra nếu bạn tải và chỉ có tập lệnh mở, tập lệnh đóng và mã JavaScript trong HTML mà bạn tải?

Đây là trang trình điều khiển:

<!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>

Đây là nội dung của trackingCode.html:

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

Điều này phù hợp với tôi trong Safari 4.

Cập nhật: Đã thêm DOCTYPE và không gian tên html để khớp với mã trên môi trường thử nghiệm của tôi. Đã thử nghiệm với Firefox 3.6.13 và mã ví dụ hoạt động.

— Tony Miller
nguồn
1
Hiểu rồi, cảm ơn Tony! Xóa các thẻ <html>, <head> và <body> dường như là một mẹo nhỏ.
— Mike
1
tôi đã lang thang liệu tôi có nên thực hiện một cuộc gọi ajax riêng biệt getJson () bởi vì tôi đã nghe nói về điều này .. Nhưng nếu nó hoạt động như vậy thì vẫn ổn !! Tôi sẽ gọi cho các truy vấn cùng hai lần khác
— GorillaApe
2
Mã của bạn thực sự không hoạt động trong FF (IE8 - hoạt động tốt). Có cách nào để làm cho điều này hoạt động trên tất cả các trình duyệt không? Cảm ơn
1
@Maxim Galushka Tôi vẫn có các tệp này trong máy trạm cá nhân của mình. Nếu không sửa đổi, họ đã tạo ra hành vi chính xác. Tôi đang sử dụng Firefox 3.6.13 trên Windows 7.
— Tony Miller
41 
$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});
— xtds
nguồn
Điều này đã làm các mẹo cho tôi. Đây là một ví dụ mà bạn có thể thử: var frmAcademicCalendar = "frmAcademicCalendar.aspx" if (window.location.href.toLowerCase (). IndexOf (frmAcademicCalendar.toLowerCase ())> = 0) {$ ("# includeeCMSContent"). load (" example.com #externalContent", function () {$ .getScript ("example.js");}); }
— Evan
25

Một phiên bản khác của giải pháp John Pick ngay trước đó, điều này phù hợp với tôi:

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); } );
   }
   ...
});
— Yannick
nguồn
2
Đây là giải pháp tốt nhất !, tôi yêu bạn @Yannick, bạn đã làm nên ngày của tôi
— utiq
15

Tôi nhận thấy đây là một bài đăng cũ hơn, nhưng đối với bất kỳ ai truy cập trang này đang tìm kiếm một giải pháp tương tự ...

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

jQuery.getScript( url, [ success(data, textStatus) ] )

  • url - Một chuỗi chứa URL mà yêu cầu được gửi đến.

  • success(data, textStatus) - Một hàm gọi lại được thực thi nếu yêu cầu thành công.

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});
— ryan
nguồn
11

Điều này dường như không hoạt động nếu bạn đang tải trường HTML vào một phần tử được tạo động.

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

Tôi xem xét firebug DOM và không có nút script nào cả, chỉ có HTML và nút CSS của tôi.

Bất cứ ai đã đi qua điều này?

— tim
nguồn
Tôi phải tải html, sau đó trong lệnh gọi lại, sử dụng $ .getScript để lấy javascript.
— Dex
1
Anh bạn! Bạn đã giải quyết vấn đề của tôi khoảng 8 năm trước đó. Cảm ơn: D
— Skorek
3

Bạn gần như đã có nó. Cho jquery biết bạn chỉ muốn tải tập lệnh:

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html script");
});
— John Pick
nguồn
7
Nhưng điều này dường như CHỈ tải và tập lệnh. Làm cách nào để bạn tải nội dung html VÀ chạy bất kỳ javascript nào mà nó có thể chứa?
— ThatAintWorking
2

Kiểm tra điều này trong trackingCode.html:

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>
— Aamir
nguồn
1

Tôi đã gặp phải điều này, nơi các tập lệnh sẽ tải một lần, nhưng các cuộc gọi lặp lại sẽ không chạy tập lệnh.

Hóa ra là một vấn đề với việc sử dụng .html () để hiển thị chỉ báo chờ và sau đó chuỗi .load () sau nó.

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

Khi tôi thực hiện các cuộc gọi riêng biệt cho chúng, các tập lệnh nội tuyến của tôi được tải mọi lúc như mong đợi.

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

Để nghiên cứu thêm, hãy lưu ý rằng có hai phiên bản .load ()

Một lệnh gọi .load () đơn giản (không có bộ chọn sau url) chỉ là cách viết tắt để gọi $ .ajax () với dataType: "html" và lấy nội dung trả về và gọi .html () để đưa những nội dung đó vào DOM . Và tài liệu cho dataType: "html" ghi rõ "các thẻ script bao gồm được đánh giá khi được chèn vào DOM." http://api.jquery.com/jquery.ajax/ Vì vậy, .load () chính thức chạy các tập lệnh nội tuyến.

Lệnh gọi .load () phức tạp có một bộ chọn chẳng hạn như tải ("page.html #content"). Khi được sử dụng theo cách đó, jQuery có mục đích lọc ra các thẻ tập lệnh như được thảo luận trong các bài viết như sau: https://forum.jquery.com/topic/the-load- Chức năng-and-script-blocks#14737000000752785 Trong trường hợp này, các tập lệnh không bao giờ chạy, dù chỉ một lần.

— efreed
nguồn
0

Chà, tôi đã gặp vấn đề tương tự mà dường như chỉ xảy ra với Firefox và tôi không thể sử dụng lệnh JQuery khác ngoại trừ .load () vì tôi đang sửa đổi giao diện người dùng trên các tệp PHP exisitng ...

Dù sao, sau khi sử dụng lệnh .load (), tôi đã nhúng tập lệnh JQuery của mình trong HTML bên ngoài đang được tải vào và nó dường như hoạt động. Tuy nhiên, tôi không hiểu tại sao JS mà tôi đã tải ở đầu tài liệu chính không hoạt động cho nội dung mới ...

— Victor G. Reano
nguồn
Dễ dàng, bởi vì nội dung mới không có ở đó khi tập lệnh được thực thi.
— Matteo
0

Tôi đã có thể khắc phục sự cố này bằng cách thay đổi $(document).ready()thành window.onLoad().

— Casey Dwayne
nguồn
0

Bắt đầu câu trả lời @efreed ...

Tôi đang sử dụng .load('mypage.html #theSelectorIwanted')để gọi nội dung từ một trang bằng bộ chọn, nhưng điều đó có nghĩa là nó không thực thi các tập lệnh nội tuyến bên trong.

Thay vào đó, tôi có thể thay đổi đánh dấu của mình để '#theSelectorIwanted'nó trở thành tệp riêng và tôi đã sử dụng

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

và nó chạy các tập lệnh nội tuyến tốt.

Không phải ai cũng có tùy chọn đó nhưng đây là một giải pháp nhanh chóng để đến được nơi tôi muốn!

— RCNeil
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.