Polymer 2.x 코드는 jsbin에서 작동하지만 codepen, plunker 또는 jsfiddle에서는 작동하지 않습니다.

아래 코드는 this codepen, this plunker 또는 this jsfiddle에서 작동하지 않습니다.Polymer 2.x 코드는 jsbin에서 작동하지만 codepen, plunker 또는 jsfiddle에서는 작동하지 않습니다.

왜 안 되니? 어떻게 3 가지 위치에서 작동시킬 수 있습니까? 즉 HTTPHTTPS의 보안 버전을 사용 jsbin 이외 다른 모든 사이트 때문에

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

는 요청 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

Polymer 2.x 코드는 jsbin에서 작동하지만 codepen, plunker 또는 jsfiddle에서는 작동하지 않습니다.

답변

관련 문제