window.location からハッシュ部分文字列値を抽出し、クエリ文字列区切り文字としての使用を許可しない URL 構文を使用して、ユーザーが表示できるように HTML に書き込もうとしています。?
だから私はこの単純なページで作業しています:
<html>
<input type="button" id="test" value="Test" />
<!-- input buton is here just to test the script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(function() {
$('#test').click(function() {
window.location = (window.location);
GetURLParameter('source');
});
});
function GetURLParameter(sParam) {
var sPageURL = window.location.hash.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
alert(sParameterName[1]);
return sParameterName[1];
}
}
}
</script>
</html>
次のような URL でページを呼び出します。これはクライアントの window.location です。
http://example.com/pagename.html#source=FOO&medium=BAR&campaign=FRED
FOO、BAR、FRED をページに書き込みたいので、ユーザーはそれを見ることができます。
?
(クエリ文字列区切り文字として URL にno があることに注意して#
ください。
...入力ボタンをクリックすると、URLからソース「FOO」を示す成功したアラートが(予想どおり)表示されます。偉大な。
しかし、他の 2 つの SParamaterName を取得するにはどうすればよいでしょうか。また、アラートを返すのではなく、それらを HTML としてページに書き込んでユーザーに表示するにはどうすればよいでしょうか?
UPDATE UPDATE UPDATE (以下)
ありがとう、@サムベーカー!! ... すばらしい答えです。$(window).load(function() {
最初の例を使用しましたが、スクリプトがオンロードで実行されるようにコードの最初の 2 行を変更しました。これが私の意図でした。
だから、私はまだこの同じ URL を使用しています:
http://example.com/pagename.html#source=FOO&medium=BAR&campaign=FRED
しかし、次のように、ハードコードされた HTML にハッシュ部分文字列の値を挿入したいと考えています。
<body>
<span class="style1">$need_source_value_here</span><br />
<span class="style1">$need_medium_value_here</span><br />
<span class="style3">$need_campaign_value_here</span><br />
span または div スタイルを HTML にハードコードすることで、各値を個別にスタイルします。
更新 更新 更新
解決策は次のとおりです。
この URL 構文を使用して、以下のコード例の次の単純なページにアクセスすると、部分文字列 vars がユーザー onload に出力され、ページ上の任意の場所に出力されます。
http://example.com/pagename.html#dyntext=FOO+MAN+CHU&dynterm=BAR+HOPPING&dynimage=FRED+IS+DEAD
<html>
<body>
<span id="dyntext-span" style="font-weight: bold;"></span><br />
<span id="dynterm-span" style="font-style: italic;"></span><br />
<span id="dynimage-span" style="text-decoration: underline;"></span><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
var tags = ["dyntext", "dynterm", "dynimage"];
for (var i = 0; i < tags.length; ++i) {
var param = GetURLParameter(tags[i]);
if (param) {
var dyntext = GetURLParameter('dyntext');
var dynterm = GetURLParameter('dynterm');
var dynimage = GetURLParameter('dynimage');
}
}
var elem = document.getElementById("dyntext-span");
var text = document.createTextNode(dyntext);
elem.appendChild(text);
var elem = document.getElementById("dynterm-span");
var text = document.createTextNode(dynterm);
elem.appendChild(text);
var elem = document.getElementById("dynimage-span");
var text = document.createTextNode(dynimage);
elem.appendChild(text);
});
function GetURLParameter(sParam) {
var sPageURL = window.location.hash.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
}
</script>
</body>
</html>
は Firefox でサポートされていないため、クロスブラウザの問題がいくつかありました。innerText
へのクロスブラウザ フォールバックを扱いたくないなどの理由でtextContent
、DOM ツリーをウォークしてテキスト ノードを作成し、+
Unicode 文字をスペースに置き換えました。これがお役に立てば幸いです。