Câu hỏi Cuộc gọi jQuery .load () không thực thi JavaScript trong tệp HTML đã tải


Điều này có vẻ là một vấn đề liên quan đến Safari chỉ. Tôi đã thử 4 trên Mac và 3 trên Windows và vẫn không có may mắn.

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 như thế này (đơn giản bây giờ, nhưng sẽ mở rộng một lần / nếu tôi làm việc này):

<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 điệp cảnh báo trong IE (6 & 7) và Firefox (2 & 3). Tuy nhiên, tôi không thể xem các tin nhắn trong Safari (trình duyệt cuối cùng mà tôi cần phải quan tâm - các yêu cầu của dự án - vui lòng không có các cuộc chiến tranh lửa).

Bất kỳ suy nghĩ nào về lý do Safari bỏ qua JavaScript trong trackingCode.html tập tin?

Cuối cùng tôi muốn có thể truyền các đối tượng JavaScript đến trackingCode.html tệp được sử dụng trong cuộc gọi sẵn sàng 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 xuống con đường đó.


76
2018-05-20 20:07


gốc




Các câu trả lời:


Bạn đang tải toàn bộ trang HTML vào div của mình, bao gồm thẻ html, head và body. Điều gì xảy ra nếu bạn thực hiện tải và chỉ có tập lệnh mở, đóng tập lệnh 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 làm việc cho tôi trong Safari 4.

Cập nhật: Thêm không gian tên DOCTYPE và html để phù hợ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.


53
2018-05-20 20:10



Hiểu rồi, cảm ơn Tony! Việc xóa các thẻ <html>, <head> và <body> dường như thực hiện thủ thuật. - Mike
tôi đã lang thang cho dù tôi nên làm 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ư thế nó là ok !! Tôi sẽ gọi cùng một truy vấn hai lần nếu không - GorillaApe
Mã của bạn không thực sự làm việc trong FF (IE8 - làm việc tốt). Có cách nào để thực hiện công việc này không tất cả các các trình duyệt? Cảm ơn
@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. Không sửa đổi, họ đã tạo ra hành vi đúng đắn. Tôi đang sử dụng Firefox 3.6.13 trên Windows 7. - Tony Miller


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

35
2017-11-22 21:47



thực sự là giải pháp tốt $ .getScript () trong vấn đề này;) +1 - Yuda Prawira
Điều này đã làm cho các trick 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) {$ ("# IncludeCMSContent"). tải ("example.com #externalContent ", function () {$ .getScript (" example.js ");});} - Evan


Một phiên bản khác của Giải pháp của John Pick ngay trước đây, điều này làm việc tốt cho 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); } );
   }
   ...
});

21
2017-09-07 07:11



Đây là giải pháp tốt nhất !, Tôi yêu bạn @ Yannick, bạn đã làm cho ngày của tôi - utiq
Cuối cùng tôi tìm thấy một sử dụng tốt của eval - NaveenDA


Tôi nhận ra đây là một phần của một bài đăng cũ hơn, nhưng đối với bất cứ ai đến trang này 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 hiện nếu yêu cầu thành công.

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

12
2018-02-23 22:07





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

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

Tôi nhìn vào 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?


8
2017-08-31 00:38



Yup, cùng một vấn đề. - Dex
Tôi đã phải tải html, sau đó trong gọi lại, sử dụng $ .getScript để có được javascript. - Dex
Dude! Bạn đã giải quyết được vấn đề của tôi khoảng 8 năm trước đó. Cảm ơn: D - Skorek


Bạn gần như đã có nó. Nói jquery bạn chỉ muốn tải kịch bản:

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

2
2017-08-03 11:38



Nhưng điều này dường như chỉ tải và kịch bản. Làm cách nào để tải nội dung html VÀ chạy bất kỳ javascript nào có thể chứa? - ThatAintWorking


Thử nghiệm với điều này trong trackingCode.html:

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>

2
2017-11-12 15:50





Tôi đã cố gắng tạo một plugin jquery cho chức năng tải html. Vui lòng tham khảo liên kết sau.

http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html

Xin đề nghị tôi cải thiện nó hơn.

Cảm ơn, Mohan


2
2018-06-14 03:22





Vâng, tôi đã có cùng một vấn đề mà dường như chỉ xảy ra cho Firefox, và tôi không thể sử dụng một lệnh JQuery ngoại trừ .load () kể từ khi tôi đã sửa đổi front-end trên exisitng PHP tập tin ...

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 đã được tải vào và nó dường như hoạt động. Tôi không hiểu tại sao JS mà tôi tải ở trên cùng của tài liệu chính đã không làm việc cho các nội dung mới tuy nhiên ...


0
2018-05-20 02:34



Dễ dàng, bởi vì nội dung mới không có khi kịch bản được thực hiện. - Matteo


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


0