フィドルのコードがローカルで動作しない

フィドルで簡単なツールチップが見つかりました：http://jsfiddle.net/6L9j0v5y/1とローカルで使用しようとしましたが、何か問題が起きました。 http://jsfiddle.net/6L9j0v5y/1/showフレームソースもコピーしましたが、同じ効果があります（ページ上のボタンのみで、クリックすると何も起こりません）。フィドルのコードがローカルで動作しない

私は（コピーして）ファイルを作成します。

コンソールにエラーがない

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta name="robots" content="noindex, nofollow"> 
    <meta name="googlebot" content="noindex, nofollow"> 
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script> 
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <style type="text/css"> 
     [data-style=mypops] + .popover { 
     background: #4194ca; 
     } 
     [data-style=mypops] + .popover.bottom .arrow:after { 
      border-bottom-color: #4194ca; 
     } 
     [data-style=mypops] + .popover-content { 
     } 
     .popovermenu { 
      list-style: none; 
      padding: 0px; 
      margin: 0px; 
     } 
     .popovermenu li { 
     } 
     .popovermenu li a { 
      color: #fff; 
     } 
    </style> 
    <title></title> 
    <script type='text/javascript'>//<![CDATA[ 
     $(window).load(function(){ 
     $("#Pops").popover({ 
      html: true, 
      content: function() { 
       return $('#popover-content').html(); 
      } 
     }); 
     });//]]> 
    </script> 
</head> 

<body> 
    <br> 
<br> 
<br> 
<div class="col-sm-4"> 
    <button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" id="Pops" data-style="mypops">Click Me</button> 
    <div id="popover-content" class="hide"> 
     <ul class="popovermenu"> 
      <li><a href="#">Action</a> 

      </li> 
      <li><a href="#">Another action</a> 

      </li> 
      <li><a href="#">Separated link</a> 

      </li> 
     </ul> 
    </div> 
</div> 

    <script> 
    // tell the embed parent frame the height of the content 
    if (window.parent && window.parent.parent){ 
    window.parent.parent.postMessage(["resultsFrame", { 
     height: document.body.getBoundingClientRect().height, 
     slug: "6L9j0v5y" 
    }], "*") 
    } 
</script> 
</body> 
</html>

、どのようにそれが動作しない理由を確認することができますか？

出典

2017-04-15 karl person

ローカル環境では、URLの前にhttp/httpsのプロトコルがないため、リソースURLをローカルファイルとして扱うからです。

サーバー上で、それは罰金をうまくいくときには、それを行うには間違っていないですが、ローカルでは問題が発生します。スクリプトを次のように変更しても問題ありません。

出典

2017-04-15 19:38:27

=、私は<スクリプトSRC 'で、この行を変更し、問題が' code.jquery.com/jqueryの-2.1.0.js'のためにされて（私は私のhtmlファイルにあなたのコードを入れて、ページがロードされません。 "https://code.jquery.com/jquery-3.2.1.min.js"> '現在ページが正しく読み込まれていますが、同じ問題があります（ボタンをクリックしても何も起こりません） –

あなたはそれをどういう意味ですか –

私はもう一度試してみましたが、おそらくそれは私の悪いことでした、ごめんなさい、あなたのご協力ありがとうございました –

フィドルのコードがローカルで動作しない

答えて

関連する問題