聚合物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>

來源

2017-09-04 Mowzer

由於除jsbin其他每一個其他的網站使用的HTTP即HTTPS安全版本中，請求從源http://polygit.org/polymer+:master/components/被阻止獲得的內容。因此，請使用安全連接，並且它可以在其他任何網站中使用。

您可以查看控制檯以獲取更多信息。

來源

2017-09-05 02:03:00 Ofisora

更改<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/">

等

來源

2017-09-05 07:55:51 Mowzer

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

回答

相關問題