Вызов jQuery .load () не выполняет JavaScript в загруженном HTML-файле. - PullRequest
Новая
       44

Вызов jQuery .load () не выполняет JavaScript в загруженном HTML-файле.

80 голосов
/ 21 мая 2009

Кажется, это проблема, связанная только с 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?

В конце концов, я хотел бы иметь возможность передавать объекты JavaScript в этот файл trackingCode.html, который будет использоваться в вызове jQuery ready, но я хотел бы убедиться, что это возможно во всех браузерах, прежде чем идти по этому пути .

Ответы [ 11 ]

55 голосов
/ 21 мая 2009

Вы загружаете всю 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>

Вот содержимое файла trackingCode.html: 

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

Это работает для меня в Safari 4.

Обновление: добавлены DOCTYPE и html namespace, чтобы соответствовать коду в моей тестовой среде. Протестировано с Firefox 3.6.13 и пример кода работает.

38 голосов
/ 23 ноября 2010 
$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});
23 голосов
/ 07 сентября 2011

Другая версия решения Джона Пика как раз перед этим, у меня отлично работает: 

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); } );
   }
   ...
});
13 голосов
/ 24 февраля 2010

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

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.');
});
9 голосов
/ 29 июня 2010

Это не работает, если вы загружаете поле HTML в динамически создаваемый элемент. 

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

Я смотрю на DOM для firebug, и там вообще нет узла сценария, только HTML и мой узел CSS.

Кто-нибудь сталкивался с этим?

2 голосов
/ 31 августа 2011

Вы почти получили это. Скажите jquery, что вы хотите загрузить только скрипт: 

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html script");
});
2 голосов
/ 12 ноября 2010

Я попытался сделать один плагин jquery для функции загрузки HTML. Пожалуйста, обратитесь по следующей ссылке.

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

Пожалуйста, предложите мне улучшить его.

Спасибо, Mohan

2 голосов
/ 03 августа 2009

Проверьте это в trackingCode.html: 

<script type="text/javascript">

    $(function() {

       show_alert();

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

    });
 </script>
0 голосов
/ 21 августа 2018

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

Оказалось, что проблема с использованием .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 () для помещения этого содержимого. в ДОМ. И документация для 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 В этом случае сценарии никогда не запускаются, даже один раз.

0 голосов
/ 20 мая 2013

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...