2016-08-25 10 views
1

こんにちは、誰かが助けることを願っています。到着するURLに応じて背景を変更してください

私はライブサイトと展開サイトを持ち、展開前に新しいコードをテストしますが、基本的に同じコンテンツを持っています。

  • ライブ= www.myserver.com/live/index.html
  • 開発= www.myserver.com/development/index.html

は(発言権を設定する方法はあります)サイトに到着するために使用されたURLに依存するCSS背景プロパティ。

私の現在のCSS =

body { 
    background: #eff; 
    /* change this to background: #ccc; if on development site */ 
    margin:25px; 
} 

なぜ? まあ、間違ったサイトに新しいコードをアップロードしたりテストしたりすることがよくあります。

私が知っている大きな問題ではありませんが、テストしているサイトを視覚的に知ることができれば便利です。

ご関心をお寄せいただきありがとうございます。

今解決しました @Adam Buchanan Smith、@DekelとMr Greenからの入力をありがとう。 はI種のDekelのロジック@使用されるが、次の線に沿ってのjQueryにそれを変更:あなたの興味のためのすべての

<script> 
$(document).ready(function(){ 
// Set background dependent upon url i.e. www.myserver.com/cab or www.myserver.com/cab2 
// cab2 is the development site, cab the live site 
// Also change text in div id="live" from 'Live Site' to 'Development Site' if arrives at by cab2 
    if (document.location.pathname.indexOf('cab2') > -1){ 
    $('body').css({"background":"#BFFFDF"}); 
    document.getElementById('live').innerHTML = "Development Site"; 
    } else { 
     $('body').css({"background":"#efffff"}); 
     document.getElementById('live').innerHTML = "Live Site"; 
    } 
} 
</script> 

私の感謝!

+0

を使用して、単なるJavaScriptであなたのために働くことができあなたはjavascriptやサーバーが必要になりますあなたは何を好きですか? –

+0

私は両方を持っています。私は、私はサイト上にある連絡フォームのために、両方とPHPでjavascriptを使用しています、感謝アダム。 –

+0

'.htaccess'ファイルでcssを読み込むことができると聞きました。あなたの開発状態を保持する小さなCSSファイルを読み込み、urlをチェックすることでhtaccessを通してスタイルを決定します。私はhtml、jsまたはcssファイルでコーディングすることを推奨しません。 –

答えて

1

あなたは純粋なhtml/cssで行うことはできませんが、JavaScriptとサーバーサイドの両方の言語を使用できます。

document.location.hostnameまたはdocument.location.pathnameが現在使用しているドメイン/ URLをチェックするかどうかを確認することができます。

例えばJavaScriptで、あなたは使用することができます。

if (document.location.pathname.indexOf('development') > -1) { 
    body = document.getElementsByTagName('body')[0] 
    body.setAttribute('class', body.getAttribute('class') + ' development') 
} 

PHPを使用して、あなたが$_SERVER['REMOTE_HOST']$_SERVER['REQUEST_URI']を使用することができます。

if (strpos($_SERVER['REQUEST_URI'], 'development')) { 
    echo "<body class=\"development\">"; 
} else { 
    echo "<body>"; 
} 

そして、あなたが使用することができますcssファイルに:理論的に

body { 
    background: #eff; 
} 
body.development { 
    background: #ccc; 
} 
+0

'.development'の記述だけで十分です。 –

+0

ありがとう@Dekelは、私が行くよ!あまりにもグリーン氏は私にグ​​ーグルの.htaccessと私はそれで何ができるのかを教えてくれてありがとう。すべてのあなたのご意見をお待ちしています。 –

+0

@RogerW、あなたは大歓迎です。私は、javascriptの例でも答えを更新しました。それが役に立ったら、あなたは答えを承認/投票することを歓迎します。ありがとう:) – Dekel

1

このような何かがdocument.referrer;

<body onload="checkURL()"> 
</body> 
<script> 
function checkURL(){ 
var testPage = "www.testpage.com"; 
var livePage = "www.livepage.com"; 
var lastPage = document.referrer; 

if (lastPage == livePage){ 
//do something here 
} 
else if {lastPage == testPage} 
//do something else 
} 
else{ 
//umm what did you do? 
} 
</script> 
関連する問題