Виклик jQuery .load () не виконує JavaScript у завантаженому файлі HTML

Question 1

Здається, це проблема, пов’язана лише з Safari. Я спробував 4 на Mac і 3 на Windows, і мені все ще не везе.

Я намагаюся завантажити зовнішній файл HTML і виконати вбудований JavaScript.

Код, який я намагаюся використовувати, такий:

$("#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) та Firefox (2 і 3). Однак я не бачу повідомлень у Safari (останній браузер, яким я повинен займатися - вимоги проекту - будь-ласка, ніяких вогнів полум’я).

Будь-які думки щодо того, чому Safari ігнорує JavaScript у trackingCode.htmlфайлі?

Врешті-решт я хотів би мати можливість передавати в цей trackingCode.htmlфайл об’єкти JavaScript для використання у виклику jQuery ready, але я хотів би переконатися, що це можливо у всіх браузерах, перш ніж йти цією дорогою.

Question 2

Ви завантажуєте всю сторінку HTML у свій div, включаючи теги html, head та body. Що станеться, якщо ви завантажуєте і просто маєте в завантажуваному HTML-коді відкриваючий сценарій, закриваючий сценарій та код JavaScript?

Ось сторінка драйвера:

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

Ось вміст trackCode.html:

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

Це працює для мене в Safari 4.

Оновлення: Додано простір імен DOCTYPE та html, щоб відповідати коду в моєму тестовому середовищі. Перевірено за допомогою Firefox 3.6.13 і приклад коду працює.

Question 3

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

Question 4

Інша версія рішення Джона Піка незадовго до цього мені добре підходить:

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); } );
   }
   ...
});

Question 5

Я розумію, що це дещо старіша публікація, але для тих, хто заходить на цю сторінку, шукаючи подібне рішення ...

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

jQuery.getScript( url, [ success(data, textStatus) ] )
url - Рядок, що містить URL-адресу, на яку надсилається запит.

success(data, textStatus) - Функція зворотного виклику, яка виконується, якщо запит вдається.
$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

Question 6

Здається, це не працює, якщо ви завантажуєте поле HTML в динамічно створений елемент.

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

Я дивлюся на firebug DOM, і там взагалі немає вузла сценарію, лише HTML і мій вузол CSS.

Хтось стикався з цим?

Question 7

Ви майже зрозуміли. Скажіть jquery, що ви хочете завантажити лише сценарій:

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

Question 8

Я написав такий плагін jquery для функції завантаження html: http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html

Question 9

Перевірте це в trackCode.html:

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>

Question 10

Я зіткнувся з цим, коли сценарії завантажувались один раз, але повторні виклики не запускали сценарій.

Виявилося, проблема з використанням .html () для відображення індикатора очікування, а потім ланцюжка .load () після нього.

// 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");

Для подальшого дослідження зауважте, що існує дві версії .load ()

Простий виклик .load () (без селектора після URL-адреси) - це просто скорочення для виклику $ .ajax () з dataType: "html" і взяття зворотного вмісту та виклику .html () для розміщення цього вмісту в DOM . І в документації для dataType: "html" чітко вказує "включені теги сценарію обчислюються при вставці в DOM". http://api.jquery.com/jquery.ajax/ Тож .load () офіційно запускає вбудовані сценарії.

Складний виклик .load () має селектор, такий як load ("page.html #content"). При такому використанні jQuery цілеспрямовано відфільтровує теги сценаріїв, як це обговорювалось у статтях, подібних до цієї: https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 У цьому випадку скрипти ніколи бігати, навіть один раз.

Question 11

Ну, у мене була та сама проблема, яка, здавалося, трапилася лише для Firefox, і я не міг використати іншу команду JQuery, за винятком .load (), оскільки я модифікував інтерфейс на exisitng PHP-файлах ...

У будь-якому випадку, після використання команди .load () я вбудував свій сценарій JQuery у зовнішній HTML, який завантажувався, і він, здавалося, працював. Я не розумію, чому JS, який я завантажив у верхній частині основного документа, не працював для нового вмісту ...

Question 12

Мені вдалося виправити цю проблему, змінивши $(document).ready()на window.onLoad().

Question 13

Приєднання до відповіді @efreed ...

Я використовував .load('mypage.html #theSelectorIwanted')для виклику вмісту зі сторінки за допомогою селектора, але це означає, що він не виконує вбудовані сценарії всередині.

Натомість я зміг змінити розмітку так, що '#theSelectorIwanted'вона стала її власним файлом, і я її використав

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

і вбудовані сценарії працювали просто чудово.

Не кожен має такий варіант, але це був швидкий обхідний шлях, щоб дістатися туди, де я хотів!