登录 注册

登录

问题 如何将onload="load()" 加入指定页面的<body>中

更多
2015年11月12日 14:31 - 2015年11月12日 17:33 #1 作者: ggzzgg2001
最近在研究html5,做了一个动画,但必须要在body中加载,我用的是joomlart的模板,不想把onload="load()" 加在每一页上,请问有什么办法,将onload="load()" 加入指定页面的<body>中,有没有相关的插件或是模块?
源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>floor</title>
 
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="floor.js"></script>
 
<script>
var canvas, stage, exportRoot;
 
function init() {
	canvas = document.getElementById("canvas");
	images = images||{};
 
	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(lib.properties.manifest);
}
 
function handleFileLoad(evt) {
	if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
 
function handleComplete() {
	exportRoot = new lib.floor();
 
	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();
	stage.enableMouseOver();
 
	createjs.Ticker.setFPS(lib.properties.fps);
	createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
 
<body onload="init();" style="background-color:#D4D4D4">
	<canvas id="canvas" width="1200" height="675" style="background-color:#000000"></canvas>
</body>
</html>
最后修改: 2015年11月12日 17:33 由 Joomla之门.

登录 或者   注册一个会员帐号 来参与讨论

更多
2015年11月12日 17:35 #2 作者: Joomla之门
可以考虑修改模板的相关文件来插入一次,然后就能在每一个页面上输出该代码。

请提供一下你的 JA 模板名称,我帮你看看应该修改哪个文件。

另外,你慎重考虑一下,你所需要的动画,难道无法通过某个现成的 Joomla 扩展来实现?

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!
下列用户已致谢:: ggzzgg2001

登录 或者   注册一个会员帐号 来参与讨论

更多
2015年11月16日 16:05 #3 作者: ggzzgg2001
问题解决了一半,我把load()放到所有代码的最后,读完代码直接自动运行,在html中可以运行,但joomla不行。
改用iframe实现,但出现的问题是iframe只能写固定尺寸,这样在手机观看时无法缩放动画大小。这个也是无法接受的。
我暂时把动画改成flash了,但是无法在ios系统中显示。

请教白兄,有什么现成的导入joomla扩展的方式写入html5吗。 :(

附上动画地址:http://www.oakplanet.com.au/index.php/the-board
服务器是godaddy的,有点慢

登录 或者   注册一个会员帐号 来参与讨论

更多
2015年11月16日 22:54 #4 作者: Joomla之门
看到你的动画了。这种效果没有现成的 Joomla 扩展可用。必须嵌入播放你自己创建的动画(HTML5 或者 Flash)。

我虽然不懂编程,但是简单看了一下你上面给出的代码,似乎可分成两部分:

第一部分:在 HEAD 区域加载若干 JS 文件及一段 javascript 代码;
第二部分:在 BODY 中插入画布(canvas);

大多数人感到困难的是第一部分,因为 Joomla 的文章编辑页面上,没有提供 HEAD 部分的编辑功能,无法加载指定的 JS 文件;至于第二部分,直接在文章内容里面插入代码就可以了。

实际上,第一部分也不难:很多商业模板(例如 JA 的大部分模板)都直接在模板参数中提供了一个“加载指定 JS/CSS”的参数,你可以输入路径(网址)来加载;如果你的模板没有提供这种参数,也可以通过安装相应的“自定义代码加载插件”类型的扩展,来加载指定的 JS/CSS 。

你前面提到需要将 onload="init(); 这部分代码放入 body 元素,我觉得或许不一定非要这样,我见过一些 HTML5 动画的源代码,并不需要修改 body 元素。如果你能想办法不使用 onload="init(); 这个语法,或许就容易多了。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2015年11月17日 00:04 #5 作者: Joomla之门
今天晚上汉化了一个名叫 Custom HEAD 的插件,可以让站长方便地向网页 HEAD 标记中插入任意代码 —— 比如加载 JS 或 CSS 等等。这个插件完全可以解决上述“第一部分”的问题。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!
下列用户已致谢:: ggzzgg2001

登录 或者   注册一个会员帐号 来参与讨论

更多
2015年11月17日 16:06 #6 作者: ggzzgg2001
感谢白兄,有这个就没问题了 B)

登录 或者   注册一个会员帐号 来参与讨论

更多
2015年11月17日 19:27 #7 作者: Joomla之门
你是说安装了 Custom HEAD 插件之后问题就解决了吗?

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2015年12月01日 15:04 #8 作者: ggzzgg2001
上次这个问题,我没用 Custom HEAD 插件解决,我直接在内容里面加入了js,但用Custom HEAD应该更好,避免更换编辑器导致代码丢失。
至于html5插入的问题,我的html5太大了,预读很慢,放弃了,最后解决办法是用win下显示flash,苹果下显示图片解决的,等有机会再研究一下如何用quicktime做交互动画吧。

登录 或者   注册一个会员帐号 来参与讨论

更多
2015年12月01日 19:21 #9 作者: Joomla之门
我看了一下你的动画并不复杂,或许可以考虑导出为 GIF 动图,在哪个平台都能显示了,加载速度应该也比较快。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论