简单实现FBML，在网页中自定义标签，使用javascript翻译
2011-10-12 10:06 chris-shao 阅读(502) 评论(2) 编辑 收藏 举报Facebook 在改进页面调用实现中，增加了FBML标签，这样开发者可以直接在html中加入FBML的语法实现对FaceBook API的调用，非常方便，例如，要放一个顶的按钮时，只需要如下代码<FB:Like URL="....."/>
然后引入facebook的javascript，在页面生成时，javascript会自动查找这类标签，并翻译为标准html，例如上面的标签会被翻译为含有javascript的图片链接，以及一个iframe帧。
具体Facebook的标签使用不是这里的重点，如果想要了解，可以参阅Facebook的帮助文档。根据这样的思路考虑，我们在开发过程中，有些复杂的页面调用，也可以使用这样的方法来实现，这样，页面开发将会更为简单，比如：页面中视频调用，或者集中的一些逻辑处理，再或者跨站的数据调用。
下面为我的简单示例：
<html>
<head>
<script src="jquery-1.4.3.min.js"></script>
</head>
<body>
<f:test url="aaa" color="red"></f:test>
</body>
</html>
<script>
var test=document.getElementsByTagName("f:test")[0];
$(test).replaceWith("<div style='color:"+test.attributes["color"].value+"'>"+test.attributes["url"].value+"</div>");
</script>
<head>
<script src="jquery-1.4.3.min.js"></script>
</head>
<body>
<f:test url="aaa" color="red"></f:test>
</body>
</html>
<script>
var test=document.getElementsByTagName("f:test")[0];
$(test).replaceWith("<div style='color:"+test.attributes["color"].value+"'>"+test.attributes["url"].value+"</div>");
</script>
代码不是很简洁，jquery的库大家自己链接。这样在html中定义的f:test标签，在页面显示时就会变为div标签，并且设定颜色为红色，
在主流IE 7,8，Firefox,Safari,Google Chrome测试通过。
