Question

我在GWT上使用此元素在我的网络应用程序上成功添加和显示HTML代码。

然而，当我尝试添加＆＃34; Facebook之类的按钮＆＃34;代码，它根本不显示：

Element adContainerDiv = getView().getFooter().getElement(); 
adContainerDiv.setInnerHTML("<div class='fb-like' data-href='http://www.example.com' data-send='false' data-layout='button_count' data-width='100' data-show-faces='false' data-action='recommend' data-font='arial'></div>");

此代码位于<body>：

的开头

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=1265448483273";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!-- END Facebook button function -->

＆＃34;推文按钮＆＃34;会发生类似的事情。代码，显示纯文本链接，没有任何样式：

Element adContainerDiv = getView().getFooter().getElement();
adContainerDiv.setInnerHTML("<a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>");

在<body>我有这个代码之后（我在setInnerHTML上尝试过但是仍然没有工作：

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

这是<body></body>：

之间Tweet按钮在 DOM 中的显示方式

<script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=13592647473";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

<div style="top:0PX;height:60PX;width:1000PX;position: relative;" id="ur39jgf03kd">
<a href="https://twitter.com/share" class="twitter-share-button" 
data-via="example_com">Tweet</a></div>

有什么想法吗？

Answer 1

我没有明显的理由 - 默认情况下，facebook / twitter按钮需要在加载facebook / twitter脚本之前创建所有按钮。因此，在创建新按钮并将其附加到dom 后，您应该通知这些外部库。

快速搜索"Dynamically add twitter button using javascript"为我们提供了way如何为Twitter做的事情：

twttr.widgets.load();

所以我们需要将这个包装成一些你的GWT类的本机方法（这叫做JSNI）：

  public static native void refreshTwitterButtons()/*-{
     $wnd.twttr.widgets.load();
  }-*/;

剩下的就是在创建并附加到DOM twitter按钮html代码后调用此函数。对于facebook，基本上是相同的工作流程，google "Dynamically add facebook button using javascript"，你找出你必须调用的API，你可以为它创建适当的原生方法。

Answer 2

以下是针对您的问题的简单修复：

在您的HTML中，包含以下内容

    <script>
        window.fbAsyncInit = function() {
            FB.init({
                appId      : 'YOUR_APP_ID', // App ID
                status     : true, // check login status
                cookie     : true, // enable cookies to allow the server to access the session
                xfbml      : true  // parse XFBML
    });

  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

创建可以扩展的FBWidget类，如下所示：

public class FBWidget扩展HTML {

protected String id;

public FBWidget(String string)
{
    super(string);
    id=null;
}

@Override
protected void onLoad() {
    try {
        if(id==null)
        {
            parseFBXML();
        }
        else
        {
            parseFBXML(id);
        }
    } catch (JavaScriptException e) {
        System.err.println(e);
    }
}

protected native void parseFBXML()
/*-{
    $wnd.FB.XFBML.parse();
}-*/;

protected native void parseFBXML(String id)
/*-{
    $wnd.FB.XFBML.parse(document.getElementById(id));
}-*/;

}

现在，如果您想要添加FBLike小部件，只需像这样扩展类：

公共类FBLike扩展FBWidget {

public FBLike(String url) {
    super(getCode(url));
}


private static String getCode(String url) {
    return "<fb:like id=\""+"PUT_AN_ID_HERE"+"\" href=\""+url+"\" send=\"true\" width=\"500\" show_faces=\"false\" ></fb:like> ";
}

}

增加fb.parse速度你可以包含FBLike方法的id，这不会解析整个页面，只是具有指定id的元素;

Answer 3

很抱歉，如果这太明显了，你在哪里定义了CSS类“fb-like”？

btw有很多JS / JQuery库可以添加这样的按钮。使用JSNI，GWT / JS集成相当容易。它也可以通过使用CSS类名从GWT触发。

Answer 4

你可以试试这个：

HTML fbLikeButton = new HTML("<div class='fb-like' data-href='http://www.example.com' data-send='false' data-layout='button_count' data-width='100' data-show-faces='false' data-action='recommend' data-font='arial'></div>");
containerForSocialMediaButtons.add(fbLikeButton);

如果containerForSocialMediaButtons是您在适当位置添加的GWT面板。尝试将原始HTML添加到页面时，请始终使用HTML类。但请注意，如果放在HTML中的String不安全，则可能会遇到安全问题。

Facebook按钮未显示在GWT Element.setInnerHTML（）中。显示没有样式的推文按钮

4 个答案: