How to run scripts for embedded objects in AJAX deep linked sites
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开发者_如何学Go 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?
Browsers will not execute JavaScript that has been added to the DOM as text. Take a look at this question which:
Executing <script> inside <div> retrieved by AJAX
加载中,请稍侯......
精彩评论