JQuery .get не выполняет Javascript - PullRequest
Новая
       21

JQuery .get не выполняет Javascript

2 голосов
/ 24 ноября 2011

Я использую метод JQuery .get для извлечения некоторого контента с веб-страницы (стр. 1) и отображения его в div на главной странице. Проблема в том, что содержимое содержит некоторые вызовы JavaScript. Содержимое отображается, но методы Javascript не выполняются . Ссылка на файл .js указана на всех страницах, поэтому наличие js в основном не является проблемой.

Это код на главной странице. URL страницы 1 передается функции .get: 

$.get(url, function(response) {          
    var newContent = $(response).find("#right");      //Find the content section of the response
    var contentWrapper = $("#wrap");         //Find the content-wrapper where we are supposed to change the content.
    var oldContent = contentWrapper.find("#right");   //Find the old content which we should replace.

    oldContent.replaceWith(newContent);
});

Это код в # right (div) страницы 1 

Some html tags...    
<p><script type="text/javascript">abc7();</script></p>
<p><script>s(30)</script></p>
Some html tags...

Функции abc7 и s доступны в формате .js (обычный файл javascript), ссылка на который есть в разделе всех страниц

В s (30) должно отображаться текстовое поле размером 30.

Ответы [ 2 ]

6 голосов
/ 26 ноября 2011

Встроенный JavaScript не будет работать, если вы не запустите на нем eval(). Вы можете прочитать больше об этом здесь:

Решение eval() может выглядеть примерно так, , но я бы посчитал это плохой практикой : 

$.get(url, function(response) {          
    var newContent = $(response).find("#right");      //Find the content section of the response
    var contentWrapper = $("#wrap");         //Find the content-wrapper where we are supposed to change the content.
    var oldContent = contentWrapper.find("#right");   //Find the old content which we should replace.

    oldContent.replaceWith(newContent);


    //Find all inline script tags in the new content and loop through them
    newContent.find("script").each(function() {
        var scriptContent = $(this).html(); //Grab the content of this tag
        eval(scriptContent); //Execute the content
    });
});

Лучшее решение - установить идентификатор / имя для тега #right и выполнить код, необходимый для этого конкретного содержимого.

Что-то вроде: 

<div id="right" data-page-name="index">
    <!-- Content -->
</div>

<div id="right" data-page-name="about-us">
    <!-- Content -->
</div>

Простое решение, которое просто передает имя страницы функции, которая будет выполнять код в зависимости от страницы, будет выглядеть примерно так: 

$.get(url, function(response) {          
    var newContent = $(response).find("#right");      //Find the content section of the response
    var contentWrapper = $("#wrap");         //Find the content-wrapper where we are supposed to change the content.
    var oldContent = contentWrapper.find("#right");   //Find the old content which we should replace.

    oldContent.replaceWith(newContent);

    var pageName = newContent.attr("data-page-name");

    pageSpecificActions(pageName);
});

function pageSpecificActions(pageName) {
    if (pageName == "index") {
        //Run the code for index page
    } else if (pageName == "about-us") {
        //Run the code for about us page.
    }   
};

Это удерживает код JavaScript от встроенного и не использует eval(). Еще лучше было бы использовать события, когда содержимое страницы меняется, но пока этого будет достаточно.

5 голосов
/ 19 июля 2013

Вы можете использовать функцию .load() вместо .get(). Он автоматически выполняет сценарии, содержащиеся в ответе.

Вот документация: .load ()

...