0

我有一个网站，我希望它在每次加载页面时随机加载不同的 HTML5 Javascript 动画，JavaScript 是迄今为止我最薄弱的技能之一，我提前感谢任何帮助，如果这恰好是重复的（我'已经尝试搜索）然后请投票关闭问题。

基本上我使用的方法很脏，很可能是它不起作用的原因，基本上我尝试了 randommath 并且没有运气，并将其归结为我的 JS 技能非常薄弱，看起来更简单的替代方法也不起作用这基本上是在页面加载时插入 HTML，例如 a.html 和 b.html 都包含不同的脚本。

这就是我的代码的样子：

HTML

<html>
<head>
    <script src="js/insert.js"></script><!-- This inserts the Random Page -->
</head>
<body onload="loadExternalHTMLPage()"> 
    <div id="injectjs"> </div>
    <canvas="id"> </canvas>
<script src="js/animation-lib-pageA.js"></script><!--Library for pageA --> 
<script src="js/animation-lib-pageB.js"></script><!--Library for pageB -->
</body>
</html>

注入.js

function loadExternalHTMLPage() {

var xmlhttp;
var pagesToDisplay = ['a.html', 'b.html'];
if (window.XMLHttpRequest) {

xmlhttp = new XMLHttpRequest();

} else {

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}
xmlhttp.onreadystatechange = function () {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

document.getElementById("jsinsert").innerHTML = xmlhttp.responseText;

}

}
var randomnumber = Math.floor(Math.random() * pagesToDisplay.length);
xmlhttp.open("GET", pagesToDisplay[randomnumber], true);
xmlhttp.send();

}

大多数 JS Guru 应该能够看到我在页面加载时随机插入 a.html 和 b.html，现在这可行，但问题是 a.html 和 b.html 中包含的脚本没有执行。（使用萤火虫我可以清楚地看到脚本正在按预期插入）。

所以例如 a 和 b 看起来像：

一个.html

<script> window.onload = function () { }</script>

b.html

<script> window.onload = function () { } </script>

基本上，A 和 B 中的代码是有效的，并且在这个插入中可以正常工作，我已经将上面的示例填充为占位符。A 和 B 都包含执行画布中包含的动画的 JavaScript，但它目前不起作用，我怀疑这与我在加载页面后加载脚本的事实有关。提前致谢。

4

2 回答 2

1

您可以随时使用eval()来执行您下载的内容... :)（不推荐）。

或者您可以在将页面提供给用户之前修改服务器上的 html 页面以包含您想要的随机脚本（您没有声明平台），因为它在页面加载时无论如何都会更改。

于 2013-06-16T21:40:41.417 回答
1

您可以随机加载 A 或 B 的 html，然后运行其动画。

此示例使用 jQuery，这使得加载远程 html 的任务更容易。这是 jquery .load 函数的链接，它用下载的 html 替换现有元素 html：http ://api.jquery.com/load/ 如果你想要纯 javascript，你可以使用那个 [messier!] 替代方案，但是逻辑保持不变。

这些是步骤：

  1. 确保网页已加载，
  2. 随机选择 A 或 B 加载/执行，
  3. 用 htmlForA 或 htmlForB 替换 #injectjs 中的 html，
  4. 等到html被完全替换掉，
  5. 运行相应的动画A 或动画B。

这是入门代码。（确保包含 jQuery 库）

<script>

window.onload(){

    // randomly load html+animation A or B

    if(Math.random()<.50){

        $('#injectjs').load(
              'yourSite.com/HtmlForA.html',   // first load the html for A
              function(){ animationA(); }     // then run animationA
        );

    }else{

        $('#injectjs').load(
              'yourSite.com/HtmlForB.html',   // first load the html for B
              function(){ animationB(); }     // then run animationB
        );

    }

}

</script>
于 2013-06-17T06:22:21.643 回答