简单实现FBML，在网页中自定义标签，使用javascript翻译
2011-10-12 10:06 chris-shao 阅读(505) 评论(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测试通过。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架