なぜJavaScript関数の実行後にクエリ文字列パラメータが追加されるのですか？私は色を保存しようとしています

<?php 
session_start(); 
?> 
<!DOCTYPE html> 
<html> 
    <body> 

     <h2 id="title">Choose a background Theme</h2> 
     <div id="black"></div> 
     <div id="orange"></div> 
     <div id="brown"></div> 

    </body> 
</html>

ので、私はセッション変数に格納する$_GET変数を使用することができ、今私は、クエリ文字列にそれを追加しようとしている値を割り当てるには、セッションパラメータのdiv要素でクリックなぜJavaScript関数の実行後にクエリ文字列パラメータが追加されるのですか？私は色を保存しようとしています

<script> 
    var c_selected; 
    window.onload = function() { 

     document.getElementById("black").addEventListener("click", function() { 
      setBackground("black"); 

     }); 
     document.getElementById("orange").addEventListener("click", function() { 
      setBackground("orange"); 
     }); 
     document.getElementById("brown").addEventListener("click", function() { 

      setBackground("brown"); 
     }); 

    }; 

    function setBackground(scolor) { 
     location.href = (location.href.split("?").length > 1) ? location.href.split("?")[0] + "?color=" + scolor : "?color=" + scolor; 
     document.body.style.backgroundColor = scolor 
     document.getElementById(scolor).style.border = "thick solid white"; 
     if (c_selected) { 
      document.getElementById(c_selected).style.border = "none"; 
     } 
     document.getElementById("title").style.color = "white"; 
     <?php $_SESSION['THEME_COLOR'] = isset($_GET['color']) ? $_GET['color'] : "white"; ?> 
     c_selected = scolor; 
    } 


</script>

<div>をクリックするとすぐに、背景色が分割されて実行され、デフォルトの白い背景に戻り、クエリ文字列が関数の実行後に追加されます。

解決策だけでなく、これが発生する理由を説明してください。

出典

2017-02-21 HVenom

location.hrefを変更しているときは、ページを再読み込みしていますが、スクリプトが実行されている間に、色のプロパティをいつ変更するかを確認できます。

あなたが変更している行だけをコメントしましたlocation.href。

あなたは、クエリ文字列パラメータとして色を使用したい場合は、ハッシュに＃パラメータ

var c_selected; 
 
    window.onload = function() { 
 
    document.getElementById("black").addEventListener("click", function() { 
 
    setBackground("black"); 
 

 
    }); 
 
    document.getElementById("orange").addEventListener("click", function() { 
 
    setBackground("orange"); 
 
    }); 
 
    document.getElementById("brown").addEventListener("click", function() { 
 

 
    setBackground("brown"); 
 
    }); 
 

 
}; 
 

 
function setBackground(scolor) { 
 
    
 
    /*location.href = (location.href.split("?").length > 1) ? location.href.split("?")[0] + "?color=" + scolor : "?color=" + scolor;*/ 
 
    
 
    document.body.style.backgroundColor = scolor; 
 
    document.getElementById(scolor).style.border = "thick solid white"; 
 
    return; 
 
    if (c_selected) { 
 
    document.getElementById(c_selected).style.border = "none"; 
 
    } 
 
    
 
    
 
    c_selected = scolor; 
 
}

<html> 
 
<body> 
 

 
    <h2 id="title">Choose a background Theme</h2> 
 
    <div id="black">Black</div> 
 
    <div id="orange">Orange</div> 
 
    <div id="brown">Brown</div> 
 

 
</body> 
 
</html>

出典

2017-02-21 13:16:46

しかし、私はPHPで＃のクエリ文字列パラメータを取得しない方法よりを使用する必要がありますか？ – HVenom

私はあなたがミックスインのコンセプトだと思います。もしあなたがPHPでvar色を保存したいのであれば、これを達成するためにフルページをリロードする必要はありません。最善の方法は、それを保存する外部ページへのajax呼び出しを行うことです。したがって、ユーザーエクスペリエンスは、リフレッシュしなくてもずっと良いでしょう。 –

クエリパラメータを変更してlocation.hrefを変更すると、新しい場所が表示されるため、ブラウザはページをリロードします。これを防ぐには、区切り文字として?の代わりに#を使用して、ハッシュlocation.hrefを変更する必要があります。

ページをリロードする場合は、実際にページが読み込まれた後に背景色を設定する必要があります。クリックハンドラーを追加すると、setBackground()が呼び出され、ページがリロードされます。

window.onload = function() { 
/*add click handlers*/ 
document.body.style.backgroundColor = "<?php $_SESSION['THEME_COLOR'] = isset($_GET['color']) ? $_GET['color'] : "white"; ?>"; 
}

あり、その機能は、ブラウザがページをリロードしますので、setBackground()に背景色を変更する必要はありませんので、あなたは文句を言わない、非常に長い結果を参照してください。

出典

2017-02-21 13:09:09 philipp

なぜJavaScript関数の実行後にクエリ文字列パラメータが追加されるのですか？私は色を保存しようとしています

答えて

関連する問題