Bluemixデプロイされたアプリケーションで折り畳まれたnavbarを展開できません

非常に単純なnode.jsアプリケーションをbluemixにデプロイします。私はejsとブートストラップを使ってトップにnavbarを作成しています。私のローカルバージョンのコードで動作しますが、bluemixにデプロイしてデプロイすると、navbarは展開されません。興味深いことに、両方のアプリケーションのソースコードはブラウザで見られるものとまったく同じです。Bluemixデプロイされたアプリケーションで折り畳まれたnavbarを展開できません

<!-- views/pages/start.ejs --> 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<!-- views/partials/head.ejs --> 

<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Some Title</title> 

<!-- CSS (load bootstrap from a CDN) --> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<style> 
    body { position: relative; padding-top:50px; } 
</style> 

</head> 

<body class="container" data-spy="scroll" data-target=".navbar" data-offset="50"> 

<header> 
<!-- views//partials/header.ejs --> 


<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Website</a> 
    </div> 
    <div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#section1">Section 1</a></li> 
      <li><a href="#section2">Section 2</a></li> 
      <li><a href="#section3">Section 3</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</nav> 
</header>

出典

2016-08-04 Carlos Mendoza

Bluemixでアプリケーションを読み込むと、ブラウザにアドレスバーに「シールド」アイコンが表示されますか？その場合は、mixed content blockingになっている可能性があります。これは基本的に、ブラウザがHTTPS経由で提供される外部コンテンツをHTTPS経由で配信することを拒否したことを意味します。

それを修正する最も簡単な方法は、すべてのhttps://のURLに自分の外部リソースを変更することです：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

はセキュリティのために、あなたはいつもにもそのhttps:// URLを使用してBluemixアプリをロードする必要があります。

出典

2016-08-04 17:29:53 mamacdon

ありがとうございました！それは問題を解決しました。 –

Bluemixデプロイされたアプリケーションで折り畳まれたnavbarを展開できません

答えて

関連する問題