Variablen im Quelltext einer html seite durch url parameter austauschen
Hola los todos!
Ich würde gerne eine Landingpage nach dem Muster https://www.w3schools.com/code/tryit.asp?filename=G5CXSHZUUYTJ nutzen.
Wie in dem Beispiel gibt es immer drei Variablen: Job = Manager, Stadt = London und Stadt-ID=129949
Ich würde gerne diese drei Variablen im html quelltext durch drei Parameter in der Url austauschen.
Also der html code auf domain.com/?job=manager&city=london&id=129949 würde dann so aussehen wie in dem Beispiel oben.
Und wenn ich die Url Parameter in domain.com/?job=sales&city=glasgow&id=163317 ändere, würde es dann so aussehen:
https://www.w3schools.com/code/tryit.asp?filename=G5CYDZL7YASK
Wie muss man den Quellcode der Landingpage anpassen, damit man diese drei Parameter beliebig übergeben kann?
Und wie müssen die URL Parameter sein, damit das Ganze auch für Jobs und Citys funktioniert, die aus mehr als einem Wort bestehen?
Beispiele: Administrative Assistent & New York City?
https://www.w3schools.com/code/tryit.asp?filename=G5CYK3NFGJGT
Danke & Gruss
Der hier verwendete Code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
height:1000px;
}
textarea{
width:79vw;
height:200px;
margin:0 auto;
}
div.cjjobbox{
width: 79vw;
background-color: #FFFFFF ;
border-style: solid ;
border-width: 1px ;
border-color: #919294 ;
font-family: Arial, sans-serif ;
font-size: 13px ;
color: #000000;
text-align: left;
}
div.cjjobbox a{
color: #198ADC ;
}
</style>
</head>
<body>
<h4>Nehmen wir mal an deine Url steht obem in der Browserleiste</h4>
<code>https://www.careerjet.co.uk/partners/js_jobbox.html?s="jobtitle"&l="city"&n=5&lid="id"&nfr=1&ntt=1</code>
<p>Dann nehmen wir die url auseinander<p>
<textarea id="rein1"></textarea>
<p>Jetzt sind die parameter in variabeln gespeichert
die kannst du jetzt in einer neuen Url packen , bearbeiten oder sonst was</p>
<p>Bauen wir da jetzt mal ne neue url raus</p>
<textarea id="rein2"></textarea>
<div class="cjjobbox"></div>
<script id="w1">
/* var url_string = location.href; //ausgeklammert wegen codepen auf eigener Page wieder einfügen und nächste Zeile löschen*/
var url_string ="https://www.careerjet.co.uk/partners/js_jobbox.html?s=jobtitle&l=city&n=5&lid=id&nfr=1&ntt=1";
var url = new URL(url_string);
var s = url.searchParams.get("s");
var l = url.searchParams.get("l");
var n = url.searchParams.get("n");
var lid = url.searchParams.get("lid");
var nfr = url.searchParams.get("nfr");
var ntt = url.searchParams.get("ntt");
</script>
<script id="w2">
neu1='jobtitelneu='+s;
neu2='cityneu='+l;
neu3='neueid='+lid;
var urlneu=neu1+'&'+neu2+'&n=5&'+neu3+'&nfr=1&ntt=1';
</script>
<script id="w3">
var head = document.getElementsByTagName('head').item(0);
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'https://www.careerjet.co.uk/partners/js_jobbox.html?'+urlneu+'');
head.appendChild(script);
</script>
</body>
</html>
<script>
document.getElementsByTagName('textarea')[0].value=document.getElementById('w1').outerHTML;
document.getElementsByTagName('textarea')[1].value=document.getElementById('w2').outerHTML+'\n\n\n und bauen sie wieder in das Script ein \n\n '+document.getElementById('w3').outerHTML;
</script>