2013-11-25 4 views
2

У меня есть страница1, которая имеет обертку со статьями.Загрузите страницу с помощью Ajax и загрузите новые скрипты, если необходимо

<div id="wrapper"> 
    <article>...</article> 
    <article>...</article> 
    <article>...</article> 
    <article>...</article> 
</div> 

Я загрузки новых статей из page2 с Ajax и добавления их к обертке

$.ajax({ 
     url : page_to_load, 
     success : function (data) { 

      $('article',data).appendTo('#wrapper'); 

     } 
    }); 

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

Таким образом, проблема заключается в том, что некоторые из статей в новых статьях ломаются, так как им не хватает этих сценариев.

Какое оптимальное решение? Я могу подумать о проверке новых загруженных скриптов страниц и сравнить их с уже загруженными и загрузить новые, но я не знаю, как это сделать.


EDIT

Я заметил, если я установил DATATYPE к 'HTML' Я не могу искать скрипты, хотя они есть:

$('script',data)//doesn't match anything 

Но если я:

console.log(data); 

Я вижу всю страницу с <html> и <script> теги

+0

'$ (data) .find ('script')' return undefined тоже? –

+0

console.log ($ (data) .find ('script')); отображает это: [script, prevObject: e.fn.init [79], context: undefined, selector: «script», jquery: «1.10.2», constructor: function ...] – Alvaro

ответ

0

Рабочий раствор:

$.ajax({ 
    url : page_to_load, 
    success : function (data) { 
     // load the scripts 
     var dom = $(data); 
     dom.filter('script').each(function(){ 
      var scriptSrc = $(this).attr('src'); 
      if(!$('script[src="'+ scriptSrc +'"]').length && scriptSrc !== undefined) { 
       var script = $("<script/>"); 
       script.attr('src', scriptSrc); 
       $("head").append(script); 
      } 
     }); 
     // load the articles 
     $('article',data).appendTo('#wrapper'); 
    } 
}); 
+0

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

+0

ОК, я вижу. и откуда вы знаете, какие скрипты вам нужно загружать в первую очередь? – sjkm

+0

Я не понимаю ваш вопрос, не могли бы вы рассказать? – Alvaro

0

Не уверен, но, возможно, вы могли бы добавить скрипт в вызове AJAX - я не уверен в этом, потому что я не пробовал:

Proxy.Scripts.Add(new ScriptReference(AddVersion("/Pages/Items/SearchList/SearchList.Grid.js"))); 
+0

У меня есть проблема: мне нужно рисовать которые являются сценариями в первую очередь. – Alvaro

0

Этот рабочий процесс должен работать:

  1. После каждого запроса страницы:
  2. Получите все теги скриптов на загруженной странице.
  3. Loop over the scripts
  4. Если загрузка еще не началась, загрузите ее.

Вот фрагмент кода:

$.ajax({ 
    url : 'http://localhost', 
    success : function (data) { 
     $('article',data).appendTo('#wrapper'); 
     $.each($.parseHTML(data,null,true),function(){ 
      if($(this)[0].tagName == "SCRIPT"){ 
       var src = $(this).attr('src'); 
       if($('script[src="'+ src +'"]').length){ 
        $.getScript(src); 
      } 
     }); 
    } 
}); 
+0

Это то, что я думал, но $ ('script', data) ничего не возвращает. Если я делаю console.log (данные); Я вижу всю страницу со сценариями, которые я хочу, поэтому я не уверен, почему $ ('script', data) ничего не возвращает – Alvaro

+0

Я установил его в 'html', который, я думаю, правильный тип, не так ли? ? – Alvaro

+0

@ Alvaro обновил мой код. Он работает jquery> = 1.8. Я добавлю объяснение, когда я получу время –

1

Там нет никаких проблем на самом деле, если вы добавляете HTML в Дом то сценарий вызовов будет интерпретирован как если страница была загружена непосредственно, просто убедитесь, что вы используйте те же параметры, что и сокращенный метод jQuery $ .POST.

я на самом деле делать это все время и <script src=""> называются и правильно интерпретированы

Просто убедитесь, что вы обращаетесь сценарии с правой рамки, как будто HTML был жёстко на page1.

Если это не сработает, обратитесь к веб-инспектору, если скрипты загружены или нет.

0

Отключить асинхронный.

$.ajax({ 
    url : page_to_load, 
    async: false, 
    success : function (data) { 
    $('article',data).appendTo('#wrapper'); 
    } 
}); 
+0

Не могли бы вы объяснить это? – Alvaro

+0

Я не знаю много английского, но это поможет, поверьте. –

0

вы можете использовать RequireJS или библиотеку HeadJs для вызова JS-файлов.

RequireJS является загрузчик JavaScript файлов и модуль и HeadJS, небольшая библиотека для Отзывчивый Design, Feature обнаружений & ресурсов Загрузка

HeadJs является большим и полезным, попробуйте.

Смежные вопросы