URL Parameter dynamisch austauschen durch neuen Wert im
Browser
Der folgende Code in javascript tauscht zur Laufzeit die angezeigte
URL einer Webseite aus, indem der Parameter durch ein Eingabefeld angepasst wird.
Javascript,
Browser URL, Parameter, Query
Javascript code:
|
function onValueChanged(e) {
var sValue =
document.getElementById('input_Field').value;
replace_Parameter_in_URL("parameter1",sValue);
}
function replace_Parameter_in_URL(parameterName,newValue)
{
//----<
replace_Parameter_in_URL() >----
//*replace
query-string parameter with new value
var url=location.href;
var re = new RegExp("([?&])" + parameterName + "=.*?(&|$)", "i");
var separator = url.indexOf('?') !== -1 ? "&" : "?";
var sNewUrl = "";
if (url.match(re)) {
sNewUrl= url.replace(re, '$1' + parameterName + "=" + newValue + '$2');
}
else {
sNewUrl = url + separator + parameterName + "=" + newValue;
}
//replace
URL
history.pushState({}, null,
sNewUrl);
//----</ replace_Parameter_in_URL() >----
}
|
Notiz:
Das zurückschreiben auf location.href
oder location.search führt immer zu einem reload der Seite. Deshalb wird mit
history.pushState die Seiten-URL ausgetauscht.
|
@*format Grid in javascript
file *@
<script src="~/js/jsDemo.js"></script>
<form>
<div style="margin:10px;width:300px">
URL-Change
<input id="input_Field" type="text" onkeyup="onValueChanged()"/>
</div>
..
|
