22. april 2013 - 08:53 Der er 18 kommentarer og
1 løsning

Udtræk URL-parametre i JavaScript

HEJ,

Jeg har søgt efter en metode hvor jeg kan trække parametre i mit url-kald, men kan ikke finde noget. Så derfor spørger jeg:

Jeg har følgende Tag fra kaldende side:

<a href="#navneside.htm?bob=123&frank=321&tom=213#top">NAVNE</A>
hvor jeg af navne-mæssige grunde kalder dem NAME og VARIABLE.
(name =bob - variable = 123)

I denne URL har jeg 3 parametre = ("bob=123&frank=321&tom=213") (mine "-er). I et andet kald kan jeg have mange (mellem 15 -> 22) til samme HTML-side.

På TARGET-siden (navneside.htm vil jeg gerne have lagt alle
N parametre ("bob=123&frank=321&tom=213" - her er 3 - som nævnt) i et array (hvis det er muligt), således at Array[0] = "bob=123", Array[1] = "frank=321" .. "lisa=21" = Array[21] .... osv. (når der er så mange).

Hvordan gør jeg det ?

(Har prøvet window.dialogArguments - men det fungerer ikke ..)

(Jeg kan selv opdele Array-værdien i hhv. NAVN og trække VARIABLEN ud. Resten håndteres af et JavaScript.  )

Jeg kan ikke bruge PHP, ASP eller andet da det er 100% lokale HTML-sider.

Kristian
Avatar billede softspot Forsker
22. april 2013 - 13:04 #1
Starter din url rent faktisk med en hash (#), eller er det en tastefejl?

Du har i window.location-objektet adgang til search, hash og andre egenskaber vedr. den aktuelle url.

Se evt. lidt mere her: http://stackoverflow.com/questions/523266/how-can-i-get-a-specific-parameter-from-location-search

og her: https://developer.mozilla.org/en-US/docs/DOM/window.location
22. april 2013 - 18:35 #2
HEJ,

1: Der fik du mig. Krydset/ Hashen er faktisk en slåfejl.

2: Alle HTML-sider bliver genereret fra en anden programpakke (Delphi 7 (D7)), ud fra betragtningen Delphi har regnekraften, HTML (Css, javaScript mv.. ) har præsentationen.

Jeg ved ikke hvor meget du er inde i D7 men kort fortalt har D7 en BROWSER (på komponent niveau), (den fungerer faktisk som en IE 8 men denne kan med meget få undtagelser kan kontrolleres programmæssigt fra D7. Her kan jeg kontrollere al I/O (det lyder som et fata-morgana, men det er faktisk sandt) via JavaScript på HTML(Browser siden) og special interrupts hos D7. Med D7 har jeg så et fortrinligt interface til resten af systemerne inkl. WWW.

den anden vej (fra browser til D7 bruger jeg en SUB-mit funktion, som D/ kan fange. den del funker som en drøm.

Men det jeg skal bruge er et måde at håndtere mine "beskeder" til samme browser på. Jeg kan sende en lang URL med variable (href=minside.htm?parm1=var1&par2=var2 ... osv) til min browser som så via et JavaScript skal "fange"  hver eneste par(ameter) med tilhørende VAR og håndtere dette via et lokalt JavaScript. Dette Lokale Javascript fungerer (hånd-indlagte data i testversioner).

Nu er tiden kommet til at "Realisere" data.

Håber det forklarer lidt om projektet.


Kristian
Avatar billede olebole Juniormester
22. april 2013 - 20:42 #3
<ole>

(function() {
    window._GET = {};
    location.search.replace(/\??(.+?)=(.+?)(&|$)/g, function(a,b,c){
        _GET = c;
    });
})();

Så vil alle dine parametre ligge i [b]_GET
-array'et. Ved kald fra linket href="doc.html?id=123&foo=bar" vil du således kunne kalde med

alert(_GET["id"]);
alert(_GET["foo"]);

// eller:

alert(_GET.id);
alert(_GET.foo);

/mvh
</bole>
Avatar billede olebole Juniormester
22. april 2013 - 20:44 #4
Ahhh ... Ekspertens BB-parser åd noget af koden  =)

(function() {
    window._GET = {};
    location.search.replace(/\??(.+?)=(.+?)(&|$)/g, function(a,b,c){
        _GET[ b] = c;
    });
})();
22. april 2013 - 23:55 #5
Hej Ole + BOle,

Håber virkelig du nød din Chablis' og din røgede bækørred. (Fra sidste gang.. (hehe))

Men Spøg til side (og hofter fat):

Jeg kan ikke få,din kode til at virke. De kommer ud med 2 X Undefined og jeg er ikke i stand til at gennemskue hvad der kan være (og er) galt med kode snippet i sammenhæng med mine data.

Men uanset det, så fik jeg en ide (ikke særlig orignal må jeg indrømme !), men den virker .

Jeg henter sidekaldet med

var str = window.location;

og får href=..... var1=aa...... var8=ffff (eks.) i str.

med kommandoerne str.indexOF() og str.substring(xx,xx)

får jeg barberet min vaiabelstreng (str2) ned til var1=aaa&var2=bbbb .... var8=ffff;

starter tæller n
    for ( n = 0; n <= str2.length; n++)

og sætter str3 = str2.charAt(n) indtil enten = eller & mødes,

Mødes '=' sættes str3 ind i navnearray[vptr] og mødes '&* sættes str3 ind i variabelArray[vptr]. vptr opdateres ved mødet med '&*..

det virker men er særdeles uelegant (synes jeg) til gengæld kan den hente ALLE mine variable og kan (sikkert) henten 2000 hvis mine sider/ URL's vil blive så lange.

Her er scriptet:

var varArray = new Array();
var varValue = new Array();

var str1 = "href: = t2.htm?var1=ole1&var2=bole1&var3=ole2&var4=bole2&var5=ole3&var6=bole3&var7=ole4&var8=bole4";
    str1 = str1 + '&';
var str2 = '';
var str3 = '';

var  n = str1.indexOf("?");
var varptr = 0;

    if (n >= 0)
    {
        str2 = str1.substring(n+1);        // var1=ole&var2=bole .... ";

        for (n = 0; n <= str2.length; n++)
        {
            if (str2.charAt(n) == '=' || str2.charAt(n) == '&' )
            {
                if (str2.charAt(n) == '&')
                {
                    varValue[varptr] = str3;
                    str3 = '';
                    varptr++;
                }
                else
                {
                    varArray[varptr] = str3;   
                    str3 = '';
                }
            }
            else
            {
                str3 = str3 + str2.charAt(n);
            }
        }
   
    }
    else
    {
        alert('Ikke fundet ');
    }
   
    for (n = 0 ;n <= varptr-1 ; n++)
    {
        document.write(varArray[n] + '  ' + varValue[n] + '<BR>' );

    }   
//        alert('SLUT:  ' + varArray[varptr-1] + '  ' + varValue[varptr-1] );

}
</script>


Det er som nævnt uelegant men jeg kan gennemskue det ... Der findes sikkert elegantere løsninger ( udfordring ? hehe )

Det var tanken at lade variabelnavn (læs; var1) være lig med HTML-elementets (læs: TAG'gen) navn. Da kan jeg lave et JScr. loop som henter VAR1 --> var_N og sætter Par(ameter)_1 --> Par(ameter)_N ind på det rigtige HTML-element med

document.getElementByid(var_n).value = Par1;
De fleste er <input type="text" ().

Meget få er <TD> - fra Table men de vil håndteres særsklit.

Denne metode vil i den sidste ende spare mig for at programmere ca. 2000 liner javascript kode ( estimeret)..

Men foreløbig er jeg på eksperimental-planet...

Kristian
Avatar billede olebole Juniormester
23. april 2013 - 02:33 #6
Hvad får du ud af:

alert(location.search);
alert(window.location.search);
Avatar billede olebole Juniormester
23. april 2013 - 02:37 #7
For alle eventualiteters skyld skal du i dit eksempel kalde med:

(function() {
    window._GET = {};
    location.search.replace(/\??(.+?)=(.+?)(&|$)/g, function(a,b,c){
        _GET[ b] = c;
    });
})();

alert(_GET["var1"]);
alert(_GET["var2"]);
23. april 2013 - 09:13 #8
HEJ,

Jeg ved ikke hvad der gik galt første gang, men det kører nu.

Lagde scriptet ind i min HTML-fil. Navngav den  (t2.htm) og lagde 2 X 4 (&par_n=var_n) (n := 1 -> 4). Kontrollerede syntaksen. Alt OK. Lagde den ind i som testfil i Delphi og kørte Delphi. Kom ud med korrekte værdier. Både for var_1 og var_8

Stor jubel i det lille hjem.

Prøvede for sjov om jeg kunne tage en _GET.length , men den kom ud som UNDEFINED .

Er der en måde jeg kan finde antallet af elementer i _GET ?

Kristian
Avatar billede olebole Juniormester
23. april 2013 - 14:27 #9
Ja, det er et JS object, jeg bruger, og sådan et har ikke en medfødt length property. Det har arrays, men de er ikke 'associative', så de duer ikke til dette projekt.

Du kunne oprette din egen length property og vedligeholde den (tælle den op), når du indsætter i objektet:

(function() {
    window._GET = {length:0};
    location.search.replace(/\??(.+?)=(.+?)(&|$)/g, function(a,b,c){
        _GET[ b] = c;
        _GET.length++;
    });
})();
Avatar billede olebole Juniormester
23. april 2013 - 14:37 #10
En 'uforskammet' lillebitte detlaje er, at denne length property ikke virker helt som Array's length property. Et array's length property siger nemlig ikke noget om, hvormange elementer array'et indeholder. Den siger, hvad det højeste indeks er - og det er ikke nødvendigvis det samme  =)

var arr = [];
arr[0] = 123;
arr[1] = 234;
arr[215] = 345;

Her indeholder array'et arr tre elementer, men dets length vil være 215.

Sådan virker vores hjemmedestillerede length property ikke. Den indeholder objektets reelle antal af elementer (udover length property'en selv)  =)
Avatar billede olebole Juniormester
23. april 2013 - 14:40 #11
- og så var den forklaring faktisk heller ikke helt korrekt. Det viste array (arr) vil have en length på 216. Et JS-array's length er nemlig altid lig med 'det højeste indeks plus én'  *o)
23. april 2013 - 14:47 #12
HEJ,

Super duper.. !

Må jeg spørge dig om en ting mere:

Hvis jeg i kaldet til Htmlfil'en (T2.htm) har følgende:

...?var1=navn&par1=OleBole&var2=adresse1&par2=Storegade 37..... og jeg bruger _GET[ .. løsningen er det da muligt at gøre følgende (i HTML-filen (T2.htm)):

  ...

  document.getElementById(_GET[var1]).value = _GET[var1];

alias  document.getElementById('navn').value = 'OleBole';

Det er specielt første del (før lighedstegneet som giver problemer) - sidste del no problemo's .

Jeg har prøvet, men kan ikke få det til at funke rigtigt. Og da du har bedre "greje" på JS og kender _GET - objectet bedre, kunne det ikke skade at spørge. Det vil kunne spare mig for nogle hundre linier JS-code, hvis jeg kunne "loope" det.

Kristian

<script type='text/javascript'>
{
  for (n=0; n != 00; n++)  /* 00 = uendelig */   
  {
    alert (n + ' TAK ');
  }
}
</script>

så kan du selv stoppe når du finder behov ... (hehe)...

KR
23. april 2013 - 14:52 #13
Fa'ens

lavede en slå fjel:

  document.getElementById(_GET[var1]).value = _GET[var1];

burde være

  document.getElementById(_GET[var1]).value = _GET[par1];

KR
Avatar billede olebole Juniormester
23. april 2013 - 15:50 #14
Et object er strengindekseret. Et array er talindekseret. Derfor kan du ikke tælle igennem et objekt i en alm. for-løkke. Du kan gøre det i en for/in-løkke:

(function() {
    window._GET = {};
    location.search.replace(/\??(.+?)=(.+?)(&|$)/g, function(a,b,c){
        _GET[ b] = c;
    });
})();

for (var x in _GET) {
    // alert(x + " => " + _GET[x])
    document.getElementById(x).value = _GET[x];
}

Hvis du sletter udkommenteringen, kan du måske bedre se, hvad der sker  =)

Bemærk i øvrigt, at jeg vendte tilbage til 'den gamle version' uden length property. Hvis du bladrer igennem objektet med en for/in-løkke, skal du jo ikke bruge length til noget  =)

Her lidt links til Mozilla's JS-reference: Object, Array og [url=https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/for...in]for/in-løkke[]
Avatar billede olebole Juniormester
23. april 2013 - 15:52 #15
*LoL* Én tur til for Prins Knud!  :D

Her lidt links til Mozilla's JS-reference: Object, Array og for/in-løkke
24. april 2013 - 15:23 #16
HEj,

"SELV TAK " .. dette sidste, blot for at vise at jeg faktisk har lært noget JS siden sidste gang (LOL++)


Rene Descartes er blevet "pålagt" at sige følgende "Gogito, ergo sum" men jeg vil blot sige "COGITO " med tilføjelsen " Det er farligt, det giver ideer.."

For:

Mens jeg brugte nogen (læs: adskillige) timer om dagen på Odense Teknikum (hed det dengang) brugte jeg også nogen tid med at arbejde på den daværende Sperry-Univac 1130 maskine. Vi (dvs. makkeren og jeg) arbejdede lidt med Assembler og en del af instruktionerne kunne re-indexere (blot ved at sætte en bit) og ved lidt omhyggelig manipulation af disse (index-)bits, kunne vi bevæge os rundt i hele maskinens fysiske memory. det var såre let at få maskinen til at crashe og vi har (vist nok!) osse været Sperry Univac 1130 banemænd mere end et par gange...

SYSOP blev lige stik-tosset hver gang - de gange han opdagede det var os  (hehe - nu er det bare historie..)

Men tilbage til JS:

Denne re-indexering fik mig til at tænke (jf. 1 afsnit) om det var muligt via dit _GET- object at lave 4 (mere eller mindre) dynamiske Arrays hvor Array navnet hentes fra _GET[ 
(eks.: var _GET{'navne'] = new Array(); ) hvor _GET["navne"] = "navne" ).

Jeg har endvidere brugt den interne regnemaskine (den ovenpå skuldrenes forlængelse) og talt at mine variable for een HTML-side beløber sig til ca. 60. (ikke 22 som skrevet tidligere). Så i stedet for at lave en
..?var1=parm1&var2=par2.... var60=par60 (som vil fylde herfra og til juleaften 3105) brugte jeg den logiske del af regnemaskinen og besluttede mig for følgende løsning:

..?var1=Jens,Buldergade 3,0007,Bulderby,Dannevang
&var2=navn,adresse,postnr,by,land

(var0= skal være en navne liste over alle involveder navne
var4 er en "rigtig" og skal indeholde et memofelt .. )
 
osv.

og når _GET[ kan splitte dem i relle værdier (eks: Jens,Buldergade 3,0007,Bulderby,Dannevang) kan jeg splitte dem med split- funktionen. Resten skulle være at lægge værdierne ind i de resp. arrays.

Jeg spekulerer på om dette er muligt ...

KRISTIAN
Avatar billede olebole Juniormester
24. april 2013 - 17:20 #17
Jeg tror, jeg vil pege dig en helt anden og mere robust vej  =)

For det første virker det ikke så app-agtigt eller 'robust', hvis brugeren taster 'Back' efter sideskiftet og kommer tilbage til forrige side. Det ville være bedre at bruge relace metoden:

var strQuery = "?var1=abc&var2=def&var3=ghi";
window.location.relace("side.html" + strQuery);

Så byttes browserdokumentet ud med det nye som sædvanligt, men i historikken erstattes det gamle med det nye dokument. Det gamle dokument eksisterer altså ikke længere i IE's history, hvorfor man heller ikke kan navigere tilbage til det.

Dog har IE en øvre grænse for URL-længden på lige godt 2.000 tegn (protokol + sti + filnavn + query-string). Den banker du hurtigt issen imod med alle de fine data, så overvej at gemme data i Delphi i stedet.

Da der ofte er problemer med at udveksle mere komplekse datatyper mellem forskellige sprog, kan du gemme dine data i et object - som du så serialiserer til en JSON-streng, inden du sender den til Delphi:

var sharedData = {};
function createRegion(strRegion, obj) {
    if (!sharedData[strRegion]) sharedData[strRegion] = obj;
}
function addData(strRegion, strKey, val) {
    if (!sharedData[strRegion]) return false;
   
    if (strKey) sharedData[strRegion][strKey] = val;
    else sharedData[strRegion].push(val);
}
function loadNewDoc(strPath) {
    var strJsonData = JSON.stringify(sharedData);
    DELPHI.storeDataFromBrowser(strJsonData);
    window.location.relace(strPath);
}

// Eksempel på brug:
createRegion("navne", []);
addData("navne", null, "Jens,Buldergade 3,0007,Bulderby,Dannevang");
addData("navne", null, "Ole,Hjemgade 1,1111,Hjemby,Dannevang");

createRegion("diverseParams", {});
addData("diverseParams", "foo", "bar");
addData("diverseParams", "baz", "foobar");
addData("diverseParams", "myArray", ["en", "to", 3, "fire"]);

loadNewDoc("side.html");

Så kan næste dokument hente de gemte data fra Delphi:

var strJsonData = DELPHI.getStoredDataFromBrowser();
var sharedData = JSON.parse(strJsonData);

Med de gemte data vil objektet sharedData i det nye dokument se sådan ud:

var sharedData = {
    "navne": [
        "Jens,Buldergade 3,0007,Bulderby,Dannevang",
        "Ole,Hjemgade 1,1111,Hjemby,Dannevang"
    ],
    "diverseParams": {
        "foo": "bar",
        "baz": "foobar",
        "myArray": ["en", "to", 3, "fire"]
    }
};

- og du kan kalde dem med:

alert(sharedData.navne[1]);
alert(sharedData.diverseParams.foo);
alert(sharedData.diverseParams.myArray[3]);
10. maj 2013 - 13:48 #18
Hej Ole Bole,

Tak for alle dine råd.

efter en hel del fiflen, bøvlen og manipulering af ideer, forslag, løsninger, nytænkninger og den slags lykkedes det mig at finde en løsning.

Specielt den kommentar / benærkning omkring at lade delphi styre det hele fik mig til at stoppe lidt op, sætte mig ned og gentænke opgaven. Set i lyset af de nye muligheder (og her er du en uvurderlig kilde til inspiration (mere eller mindre frivilligt (hehe)), så jeg fandt en bedre løsning, som i det væsentligste baseret på følgende:

Jeg string'er org. filen (dvs. omdanner org HTML-filen til format STRING), tilføjer / retter mine aktuelle ting  (primært Data og javascript ting) i denne string og "smider" den nye HTML-string ind som String i min webbrowser. Nye rettelser FRA HTML-siden føres inden afslutning af siden over til Delphi-prgm, som så håndterer dem (gemmer / retter / cancellerer mv.)

Foreløbinge test viser ALT OK.

Så jeg lukker spm. og hvis du vil have dine point gi'r melder du bare det. 

Og PS: Jo du har min tilladelse til at spise din bækørred (røget eller stegt) med din Chablis'  (hehe)...

KR
15. maj 2013 - 15:18 #19
Jammen, så lukker jeg bare ...

KR
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester



Seneste spørgsmål Seneste aktivitet
39 min siden Poe strøm Af lurup i LAN/WAN
I går 14:46 GIF-EDITOR Af snestrup2000 i Billedbehandling
I går 14:03 Logge ind Af Bob i PC
I går 12:12 2 skærme - 1 virker - den anden siger No signal Af eksmojo i Skærme
I går 10:33 openvpn projekt Af dcedata1977 i Windows