Как запускать сценарии для встроенных объектов в глубоко связанных сайтах AJAX - PullRequest
Новая
       4

Как запускать сценарии для встроенных объектов в глубоко связанных сайтах AJAX

0 голосов
/ 11 февраля 2011

У меня есть глубоко связанный сайт AJAX. Базовая структура выглядит примерно так: 

<html>
    <head>
        ...
    </head>
    <body>
        ...
        <!-- AJAX will change the content of this div tag -->
        <div id="ajax">
            ...
        </div>
        ...
    </body>
</html>

Таким образом, идея заключается в том, что AJAX в соответствии со значением фрагмента URL (#query) будет соответствующим образом заполнять содержимое <div id="ajax">.

Вот проблема. Учти это. Пользователь изначально загружает эту страницу - (#home) и следующие загрузки: 

<html>
    <head>
        ...
    </head>
    <body>
        ...
        <!-- AJAX will change the content of this div tag -->
        <div id="ajax">
            <!-- content of the home page -->
            ...
        </div>
        ...
    </body>
</html>

После этого пользователь переходит на страницу #query. Чтобы загрузить эту страницу, AJAX изменит innerHTML тега <div id="ajax">. Предположим, что содержимое #query имеет встроенный объект (в данном примере - встроенное видео с использованием FlowPlayer). После завершения AJAX код будет выглядеть примерно так: 

<html>
    <head>
        ...
    </head>
    <body>
        ...
        <!-- AJAX will change the content of this div tag -->
        <div id="ajax">
            <!-- Flowplayer JavaScript component -->
            <script src="flowplayer-3.2.4.min.js"></script>
            <!-- The player container -->
            <div id="player" style="width:720px;height:480px;"></div>
            <!-- Player installation -->
            <script>
                flowplayer("player", "flowplayer.swf", {
                    clip: "video.mp4"
                });
            </script>
        </div>
        ...
    </body>
</html>

Так вот в чем вопрос, когда я пытаюсь это сделать, следующий скрипт никогда не запускается и, следовательно, видео никогда не загружается: 

<script>
    flowplayer("player", "flowplayer.swf", {
        clip: "video.mp4"
    });
</script>

Как я могу исправить эту проблему или что я делаю не так?

Любая помощь приветствуется.

РЕДАКТИРОВАТЬ Отчет о проделанной работе

Раньше я менял содержимое HTML тега ajax, выполняя это: 

document.getElementById("ajax").innerHTML = xmlhttprequest.responseText;

Теперь я изменил это на: 

var element = document.createElement("div");
element.setAttribute("id", "ajax");
element.innerHTML = xmlhttprequest.responseText;
toswap = document.getElementById("ajax");
toswap.parentNode.replaceChild(element, toswap);

Это решило проблему в Firefox, поэтому <script> сработало, однако оно по-прежнему не работает в Chrome и IE.

Есть идеи?

1 Ответ

0 голосов
/ 19 апреля 2013

Браузеры не будут выполнять JavaScript, который был добавлен в DOM как текст. Посмотрите на этот вопрос, который:

Выполнение внутри

...