javascript - 将 Skype 按钮添加到 HTML 面板

Question

我正在使用 GWT 开发 Web 应用程序，并希望使用 Skype URI特别是从此生成器生成的代码:SkypeButton

我使用 HTML 面板，因为它看起来像/工作起来像 HTML(见下文)。我已经拥有的:

入门级

@Override
public void onModuleLoad() {
    HTMLPanel htmlPanel = new HTMLPanel("<h1>Headline</h1>");
    HTMLPanel skype = new HTMLPanel(
       "<script type=\"text/javascript\"
       src=\"http://www.skypeassets.com/i/scom/js/skype-uri.js\"></script>"
       + "<script type=\"text/javascript\">"
       + "Skype.ui({\"name\": \"call\",\"element\": "
       + "\"SkypeButton_Call_My.User_1\",\"participants\": "
       + "[\"My.User\"], \"imageSize\": 32 });"
       + " </script> ");
    skype.getElement().setId("SkypeButton_Call_My.User_1");
    RootPanel.get().add(htmlPanel);
    RootPanel.get().add(skype);
    }

当我运行此代码时没有成功。这是编译后 HTML 代码在浏览器中的样子。

开发者工具 (Chrome)

<div id="SkypeButton_Call_My.User_1">
   <script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script>
   <script type="text/javascript">
      Skype.ui({
      "name": "call",
      "element":"SkypeButton_Call_My.User_1",
      "participants": ["My.User"], 
      "imageSize": 32 });
   </script> 
</div>

但是当我在 index.html 文件中使用上面的代码时，JS 从 skype 生成的代码创建此代码:

开发者工具 (Chrome)

<a href="javascript://" 
  onclick="Skype.tryAnalyzeSkypeUri('call', '0');
  Skype.trySkypeUri_Generic('skype:My.User?call', '_detectSkypeClient_1393181312260', '0'); 
  return false;
">
<img src="http://www.skypeassets.com/i/scom/images/skype-buttons/callbutton_32px.png" 
  alt="Skype call" 
  role="Button" 
  style="border:0; 
  margin:32px; 
  vertical-align:-41px;">
</a>

我的猜测是我的应用程序不会像网络服务器处理index.html那样执行生成的JS。

经过我的研究，我发现 JSNI 主题适合，但我不知道如何将生成的代码放入我的项目中。 :(

有人可以帮我解决这个问题吗？一个例子或方向会很棒:)

Answer 1

您无法使用 innerHTML(HTMLPanel 使用)注入(inject)脚本。您必须以编程方式构造 ScriptElement，或者使用 GWT，您可以简单地使用 ScriptInjector (不过不要忘记setWindow(TOP_WINDOW))。

ScriptInjector.fromUrl("http://www.skypeassets.com/i/scom/js/skype-uri.js")
    .setWindow(ScriptInjector.TOP_WINDOW)
    .setCallback(new Callback<Void, Exception>() {
       @Override
       public void onSuccess(Void result) {
         ScriptInjector.fromString("Skype.ui({\"name\": \"call\",\"element\": "
             + "\"SkypeButton_Call_My.User_1\",\"participants\": "
             + "[\"My.User\"], \"imageSize\": 32 });")
             .setWindow(ScriptInjector.TOP_WINDOW)
             .inject();
       }
       @Override
       public void onError(Exception e) {
         GWT.reportUnhandledException(e);
       }
    })
    .inject();

(请注意 IE 上的 setCallback，请参阅 javadoc)