将jQuery Mobile与Facebook Like和Twitter Tweet集成
我正试图在我的第二页上将JQM与Facebook Like和Twitter Tweet集成。 第二页使用锚标记加载第一页,然后使用第二页的AJAX请求加载。
问题是加载第二页时Facebook和Twitter javascript脚本没有加载。
我可以关闭AJAX,但我不希望这个function作为权衡。
有没有办法在JQM上的AJAX请求之后我们可以在特定页面上重新加载js脚本? (我认为这应该类似于jQuery live函数)。
我正在使用Cakephp 2.0.4
您使用正确的页面标准吗? 您需要在data-role="page"
元素中加载脚本,因为这是JQM框架从AJAX请求中提取的内容。
docs – http://jquerymobile.com/test/docs/pages/page-anatomy.html
在tweet按钮嵌入代码中,有一个if语句检查id为’twitter-wjs’的元素。 在页面加载之前删除此元素会使tweet按钮起作用。
$(document).bind('pagebeforeload', function(){ $('#twitter-wjs').remove(); });
这修复了像facebook一样的按钮。 我不完全确定它的工作原理,但它与Facebook的API有关。
$(document).bind('pageshow', function() { try{ FB.XFBML.parse(); } catch(err){} });
我有同样的问题,我这样解决了:
1:在你的html中在你的页面div中创建一个标签或id
2:获取twitter提供的代码并将其更改为使用jquery语法
$( '.page-class' ).live( 'pageinit',function(event){ d = $(document)[0]; s = "script"; id = "twitter-wjs"; var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } });
我尽可能地改变了twitter提供的代码。 可能有更好的方法来做同样的事情。
对于Facebook,我认为可以使用相同的方法。
希望它有助于谁面临同样的问题。
我认为有两种解决方案。 第一种是通过在超链接中添加’data-ajax =“false”’来关闭链接页面的Ajax页面转换。 这可能适合您,也可能不适合您,具体取决于您是否希望在后退按钮上保持相同的上下文 – 通常这样做,因此您可以尝试第二种解决方案。
这是我在页面上有多个Like按钮时使用的那个:当您创建页面时(挂钩到JQMobile页面创建事件),找到所有类似fb的按钮并触发它们的处理。 我不能给你一个完整的例子,但是这样的事情(注意我假设你使用XFBML格式’
- 使用jQuery选择器查找所有fb Like元素。
-
使用以下内容触发它们:
$('fb\\:like').each(function() { FB.XFBML.parse(this); });
这将使他们全部扩展到完全像按钮。
请注意,我还没有测试过它的选择器部分,但XFBML.parse位是我正在使用它并且它的工作原理。 我没有为Twitter做同样的事情,但有兴趣看到相同的代码。
多次运行此代码是安全的,因为一旦解析了它,fb:like元素将不再出现在HTML中。
这是解决方案,在第二页div中创建一个iframe。 iframe的src将是显示推文和喜欢的页面。
通过这种方式,你不必重新加载js becoz,iframe将重新加载喜欢和推文的代码。
我希望它能解决你的问题。