如何在 AJAX 深层链接站点中运行嵌入对象的脚本

发布于 2024-10-16 18:29:14 字数 2555 浏览 1 评论 0原文

我有一个 AJAX 深层链接网站。基本结构是这样的：

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

所以这里的想法是，AJAX根据URL的片段值（#query）会适当地填充

这就是问题所在。考虑一下这一点。用户最初加载此页面 - (#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。假设 #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>

我该如何解决此问题或者我做错了什么？

任何帮助表示赞赏。

编辑进度报告

我曾经通过这样做来交换 ajax div 标签的 HTML 内容：

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 中的问题，因此

有什么想法吗？

原文

I have an AJAX deep linked site. The basic structure is something like this:

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

So the idea here is that AJAX according to the fragment value of the URL (#query) will appropriately populate the content of the <div id="ajax">.

Here is the issue. Consider this. User initially loads this page - (#home) and the following loads:

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

After this, the user goes to the page #query. In order to load this page, AJAX will change the innerHTML of the <div id="ajax"> tag. Let's say that the content of the #query has an embedded object (in this example, an embedded video using FlowPlayer). After AJAX will be done, code will look something like this.

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

So here is the question, when I try to do this, the following script never runs and therefore the video never loads:

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

How can I fix this issue or what am I doing wrong?

Any help is appreciated.

EDIT Progress report

I used to swap HTML content of ajax div tag by doing this:

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

Now I have changed it to this:

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

This solved the issue in Firefox, so the <script> get triggered, however it still does not work in Chrome and IE.

Any ideas?

分享到QQ

分享到微博