Set Nilai Menurut Url Pada Address Bar

Pembaharuan 2018/05/04: Query String Parser

Beberapa situs mempunyai kemampuan untuk mengeset formulir Set Nilai Berdasarkan URL pada Address Bar — Beberapa situs mempunyai kemampuan untuk mengeset formulir-formulir mereka menurut URL

Setelah sekian usang merasa ingin tau wacana bagaimana cara Google Translate mengeset nilai pada formulir mereka menurut URL, balasannya Saya menemukannya! Fungsi ini dipakai untuk mengambil queri dari URL yang nantinya bisa kita gunakan untuk mengeset/menentukan nilai dari sebuah formulir atau apa saja menurut queri pada URL:

function getUrlQueryString(param) {     var outObj = {};     var qs = window.location.search;     if (qs !== "") {         qs = decodeURIComponent(qs.replace(/\?/, ""));         var paramsArray = qs.split("&");         var length = paramsArray.length;         for (var i = 0; i < length; ++i) {             var nameValArray = paramsArray[i].split("=");             nameValArray[0] = nameValArray[0].toLowerCase();             if (outObj[nameValArray[0]]) {                 outObj[nameValArray[0]] = outObj[nameValArray[0]] + ";" + nameValArray[1];             } else {                 if (nameValArray.length > 1) {                     outObj[nameValArray[0]] = nameValArray[1];                 } else {                     outObj[nameValArray[0]] = true;                 }             }         }     }     var retVal = param ? outObj[param.toLowerCase()] : qs;     return retVal ? retVal : ""; }

Pembaharuan: 12 Juni 2012

function getQueryVariable(variable) {     var query = window.location.search.substring(1);     var vars = query.split("&");     for (var i = 0; i < vars.length; i++) {         var pair = vars[i].split("=");         if (pair[0] == variable) {             return pair[1];         }     }     return (false); }

getQueryVariable('name'); getQueryVariable('url'); getQueryVariable('email');

Lebih sederhana.

Katakanlah kita mempunyai URL menyerupai ini:

http://www.sitename.com?name=Taufik%20Nurrohman&url=http://latitudu.blogspot.com&email=mamamia@email.com

Dengan memakai fungsi di atas kita bisa mengambil abjad Taufik Nurrohman, http://latitudu.blogspot.com dan mamamia@email.com dari URL untuk diambil sebagai variabel, sehingga kita bisa mengeset nilai atribut suatu formulir atau elemen menurut URL pada address bar menyerupai ini:

JavaScript

var username = getUrlQueryString("name"),     usersite = getUrlQueryString("url"),     usermail = getUrlQueryString("email");  document.getElementById('name').value = username; document.getElementById('site').value = usersite; document.getElementById('mail').value = usermail; document.getElementById('view').src = usersite;

HTML

<input id="name" type="text" value=""> <input id="site" type="text" value=""> <input id="mail" type="text" value=""> <iframe id="view" src=""></iframe>

Sebagai contoh, di sini terdapat tiga buah URL yang sama namun dengan queri yang berbeda. Coba Anda kunjungi satu persatu. Saya harap Anda mengerti apa yang Saya maksudkan sehabis ini:

http://tovic.github.com/dte-project/demo-javascript-set-value-from-url.html?name=Taufik%20Nurrohman&url=http://lie-out.blogspot.com

http://tovic.github.com/dte-project/demo-javascript-set-value-from-url.html?name=Mei%20Sari%27ah&url=http://ra-miftahul-jannah.blogspot.com

http://tovic.github.com/dte-project/demo-javascript-set-value-from-url.html?name=Taufik%20Nurrohman%20Saja&url=http://dte-feed.blogspot.com

Contoh faktual mengenai manfaat instruksi ini yakni untuk membuat alat-alat menyerupai Responsive Site Tester yang mempunyai kemampuan untuk menyimpan data ke dalam queri URL, sehingga kita bisa memakai URL tersebut sebagai URL berbagi.

Referensi: Stack Overflow – Posting Data Into JavaScript From an URL

Sumber https://www.dte.web.id/