Question

所以我刚开始使用Polymer，我想在这个元素中构建一个自定义的SoundCloud播放器。不知怎的，我不断收到以下错误：

未捕获错误：SC.Widget函数应该被赋予iframe 元素或指定iframe元素的id属性的字符串。

这应该意味着我没有以正确的方式定位iframe，但我想不出另一种方法（因为差不多4个小时）。

=我的问题为什么var iframe = $(".iframe");没有定位iframe。我在Polymer之外尝试过，它在那里工作得很好。

断路器stream.html：

<polymer-element name="breaker-stream" attributes="url">
    <template>
    <iframe class="iframe" width="100%" height="450" scrolling="no" frameborder="no" src="{{url}}"></iframe>
      <script>   
        var iframe = $(".iframe");
        var widget = SC.Widget(iframe);
      </script>
  </template>
  <script>
    Polymer('breaker-stream', {
        url: ""
    });
  </script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="https://w.soundcloud.com/player/api.js"></script> 
</polymer-element>

Answer 1

您不能使用jquery $访问shadow-root中的元素，就像在主文档中一样。这是有据可查的，请尝试搜索。
在模板中放置<script>标签是个坏主意，将元素脚本放在原型对象内（Polymer()内）。
将<script>置于<polymer-element>内也是一个坏主意。放在那里时，他们不做任何特别的事情，而应该在那个元素之外。

以下是一个工作示例（http://jsbin.com/xujole/4/edit）：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Polymer</title>

  <!-- web components polyfill for non-Chrome -->
  <script src="//www.polymer-project.org/components/platform/platform.js"></script>

</head>
<body>

  <breaker-stream url="http://api.soundcloud.com/users/1539950/favorites"></breaker-stream>

  <!-- from here down could be in an import -->

  <!-- need this to make Polymer elements -->
  <link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
  <!-- don't load this twice -->
  <script src="https://w.soundcloud.com/player/api.js"></script> 

  <polymer-element name="breaker-stream" attributes="url" block>
  <template>
    <iframe id="frame" width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url={{url}}"></iframe>
  </template>
  <script>
    Polymer({
      url: "",
      ready: function() {
        this.widget = SC.Widget(this.$.frame);
      }
    });
  </script>
  </polymer-element>

</body>
</html>

Polymer中的Javascript（不以正确的方式定位）

1 个答案: