聚合物2.x的代码在jsbin但不是在codepen，plunker或的jsfiddle

问题描述：

下面的代码工作正常在this jsbin但它不会在任何this codepen，this plunker或this jsfiddle工作。聚合物2.x的代码在jsbin但不是在codepen，plunker或的jsfiddle

为什么不呢？我怎样才能让它在三个地方工作？

http://jsbin.com/yudavucola/1/edit?html,console,output

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 

    <base href="http://polygit.org/polymer+:master/components/"> 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="polymer/polymer-element.html"> 
    <link rel="import" href="paper-dialog/paper-dialog.html"> 

    <!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it --> 
    <link rel="import" href="neon-animation/web-animations.html"> 
    <link rel="import" href="neon-animation/animations/scale-up-animation.html"> 
    <link rel="import" href="neon-animation/animations/fade-out-animation.html"> 

</head> 
<body> 
    <dom-module id="my-el"> 
    <template> 
     <button on-click="open">Open Dialog</button> 
     <paper-dialog 
     id="dialog" 
     entry-animation="scale-up-animation" 
     exit-animation="fade-out-animation" 
     modal 
     > 
     <h2>Header</h2> 
     <div>Dialog body</div> 
     </paper-dialog> 
    </template> 
    <script> 
     class MyEl extends Polymer.Element { 
     static get is() { return 'my-el' } 

    constructor() { 
     super(); 
     } 

     open() { 
      console.log('opening...'); 
      this.$.dialog.open(); 
      console.log('opened!'); 
     } 

     } 

     customElements.define(MyEl.is, MyEl); 
    </script> 
    </dom-module> 

    <my-el></my-el> 
</body> 
</html>

答

由于除jsbin其他每一个其他的网站使用的HTTP即HTTPS安全版本中，请求从源http://polygit.org/polymer+:master/components/被阻止获得的内容。因此，请使用安全连接，并且它可以在其他任何网站中使用。

您可以查看控制台以获取更多信息。

答

更改<base>标记的href属性从http://polygit.org/...到//polygit.org/...。这将导入在http和https环境中正常化。

以下是所有知识库中的工作示例：JsBin,Codepen，Plunker和JsFiddle。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 

    <base href="//polygit.org/polymer+:master/components/"> 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="polymer/polymer-element.html"> 
    <link rel="import" href="paper-dialog/paper-dialog.html"> 

    <!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it --> 
    <link rel="import" href="neon-animation/web-animations.html"> 
    <link rel="import" href="neon-animation/animations/scale-up-animation.html"> 
    <link rel="import" href="neon-animation/animations/fade-out-animation.html"> 

</head> 
<body> 
    <dom-module id="my-el"> 
    <template> 
     <button on-click="open">Open Dialog</button> 
     <paper-dialog 
     id="dialog" 
     entry-animation="scale-up-animation" 
     exit-animation="fade-out-animation" 
     modal 
     > 
     <h2>Header</h2> 
     <div>Dialog body</div> 
     </paper-dialog> 
    </template> 
    <script> 
     class MyEl extends Polymer.Element { 
     static get is() { return 'my-el' } 

    constructor() { 
     super(); 
     } 

     open() { 
      console.log('opening...'); 
      this.$.dialog.open(); 
      console.log('opened!'); 
     } 

     } 

     customElements.define(MyEl.is, MyEl); 
    </script> 
    </dom-module> 

    <my-el></my-el> 
</body> 
</html>

编辑

注意，对于聚合物的特定版本，你可以使用

<base href="//polygit.org/polymer2.0+:master/components/">

或

<base href="//polygit.org/polymer1.0+:master/components/">

等

聚合物2.x的代码在jsbin但不是在codepen，plunker或的jsfiddle

相关推荐