使用loadExternalHTMLPage在每个页面加载之间随机加载不同的JavaScript

使用loadExternalHTMLPage在每个页面加载之间随机加载不同的JavaScript,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我有一个网站,我希望它在每次加载页面时随机加载一个不同的HTML5 Javascript动画,Javascript是目前为止我技能中最薄弱的一个,我提前感谢任何帮助,如果这碰巧是重复的(我尝试过搜索),那么请投票关闭该问题 基本上,我使用的方法是一个肮脏的方法,最有可能的原因是它不起作用,基本上我尝试了randommath,但没有运气,这归因于我的JS技能非常弱,另一种看起来更简单的方法也不起作用,这基本上是在页面加载时插入HTML,例如,a.html和b.html都包含不同的脚本 这就是我的代

我有一个网站,我希望它在每次加载页面时随机加载一个不同的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专家应该能够看到我在页面加载时随机插入了a.html和b.html,现在可以了,但问题是a.html和b.html中包含的脚本没有执行。(使用firebug,我可以清楚地看到脚本正在按预期插入)

例如a和b看起来像:

a.html

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

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

基本上,A和B中的代码都是有效的,在这个插入中工作得很好,我将上面的示例作为占位符填充。A和B都包含执行画布中包含的动画的JavaScript,但目前无法工作,我怀疑这与我在加载页面后加载脚本有关。提前感谢。

您可以随时使用
eval()
执行您下载的内容…:)(不推荐)


或者,您可以修改服务器上的html页面,以在将页面提供给用户之前包含所需的随机脚本(您不需要声明平台),因为页面加载时会发生任何更改。

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

本例使用jQuery,这使得加载远程html的任务更容易。下面是jquery.load函数的链接,该函数用下载的html替换现有元素html:如果您想要纯javascript,可以使用[messier!]替代方法,但逻辑保持不变

以下是步骤:

  • 确保网页已加载
  • 随机选择要加载/执行的A或B
  • 将#injectjs中的html替换为htmlForA或htmlForB
  • 等到html完全被替换之后
  • 运行相应的动画A或动画B
  • 这是起始代码。(确保包含jQuery库)

    
    window.onload(){
    //随机加载html+动画A或B
    if(Math.random()