# getURLParams() returning undefined

**URL:** https://discourse.processing.org/t/geturlparams-returning-undefined/27631
**Category:** p5.js
**Created:** [February 6, 2021, 12:38pm UTC](https://discourse.processing.org/t/geturlparams-returning-undefined/27631 "2021-02-06T12:38:11Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![toby](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/toby/32/5434_2.png) [@toby](https://discourse.processing.org/u/toby)
#### Post date: [February 6, 2021, 12:38pm UTC](https://discourse.processing.org/t/geturlparams-returning-undefined/27631/1 "2021-02-06T12:38:11Z")

</div>

Hi, I’m trying to use getURLParams() but get undefined, tested in Chrome and Firefox. Code below and [online](https://editor.p5js.org/tobyhoward/sketches/TJeGFhQys?day=1&month=Feb&year=1977). Can anyone see what is wrong, please? thanks!

// test with [p5.js Web Editor](https://editor.p5js.org/tobyhoward/sketches/TJeGFhQys?day=1&month=Feb&year=1977)  
// ref: [reference | p5.js](https://p5js.org/reference/#/p5/getURLParams)

function setup() {  
createCanvas(400, 400);  
noLoop();  
}

function draw() {  
let params = getURLParams();  
console.log(params);  
}

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [February 6, 2021, 7:27pm UTC](https://discourse.processing.org/t/geturlparams-returning-undefined/27631/2 "2021-02-06T19:27:28Z")

</div>

Hi,

My guess is that the p5 web editor is a sort of JavaScript container for your sketch. In fact it’s an [iframe](https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe) :

 ![Capture d’écran de 2021-02-06 20-19-43](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/45cb34ad6848a1c3b85c51c55930ca30cc4d3d07.png)

Here the `srcdoc` attribute contains the actual code of the nested page :

```auto
srcdoc="<!DOCTYPE HTML>
<html lang=&quot;en&quot;><head>
    <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js&quot; crossorigin=&quot;&quot;></script>
    <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js&quot; crossorigin=&quot;&quot;></script>
    
    <meta charset=&quot;utf-8&quot;>

  <base href=&quot;https://editor.p5js.org/tobyhoward/sketches/TJeGFhQys?year=2014&amp;month=May&amp;day=15/&quot;><style>
html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
</style><script src=&quot;/previewScripts.js&quot;></script><script>
    function getScriptOff(line) {
      var offs = [[70,&quot;sketch&quot;]];
      var l = 0;
      var file = '';
      for (var i=0; i<offs.length; i++) {
        var n = offs[i][0];
        if (n < line && n > l) {
          l = n;
          file = offs[i][1];
        }
      }
      return [line - l, file];
    }
    // catch reference errors, via http://stackoverflow.com/a/12747364/2994108
    window.onerror = function (msg, url, lineNumber, columnNo, error) {
        var string = msg.toLowerCase();
        var substring = &quot;script error&quot;;
        var data = {};
        if (url.match(/^(http:\/\/|https:\/\/)/) !== null && error.stack){
          var errorNum = error.stack.split('about:srcdoc:')[1].split(':')[0];
          var fileInfo = getScriptOff(errorNum);
          data = msg + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
        } else {
          var fileInfo = getScriptOff(lineNumber);
          data = msg + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
        }
        window.parent.postMessage([{
          log: [{
            method: 'error',
            data: [data],
            id: Date.now().toString()
          }],
          source: fileInfo[1]
        }], '*');
      return false;
    };
    // catch rejected promises
    window.onunhandledrejection = function (event) {
      if (event.reason && event.reason.message && event.reason.stack){
        var errorNum = event.reason.stack.split('about:srcdoc:')[1].split(':')[0];
        var fileInfo = getScriptOff(errorNum);
        var data = event.reason.message + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
        window.parent.postMessage([{
          log: [{
            method: 'error',
            data: [data],
            id: Date.now().toString()
          }],
          source: fileInfo[1]
        }], '*');
      }
    };
  </script></head>
  <body>
    <script data-tag=&quot;@fs-sketch.js&quot;>// test with https://editor.p5js.org/tobyhoward/sketches/TJeGFhQys?day=1&month=Feb&year=1977
// ref: https://p5js.org/reference/#/p5/getURLParams

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  let params = getURLParams();
  console.log(params);
  
  console.log(location.href);
}</script>
  

</body></html>"

```

And in the source code of p5, we can see that it uses `location.search` to extract the url parameters :

```javascript
p5.prototype.getURLParams = function() {
  const re = /[?&]([^&=]+)(?:[&=])([^&=]+)/gim;
  let m;
  const v = {};
  while ((m = re.exec(location.search)) != null) {
    if (m.index === re.lastIndex) {
      re.lastIndex++;
    }
    v[m[1]] = m[2];
  }
  return v;
};

```

In the p5 web editor, printing `location.search` gives this :

```auto
""

```

It doesn’t work because an iframe is literally a page contained in another one. So it has it’s own url (tested in the web editor) :

```auto
console.log(location.href); // -> about:srcdoc

```

But using `getURLParams()` on a local page works fine!

---

<div class="post-metadata">

### Author: ![toby](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/toby/32/5434_2.png) [@toby](https://discourse.processing.org/u/toby)
#### Post date: [February 7, 2021, 9:20am UTC](https://discourse.processing.org/t/geturlparams-returning-undefined/27631/3 "2021-02-07T09:20:49Z")

</div>

Thank you very much josephh for taking the time to look at that! I now notice that if you share the sketch as “present” or “fullscreen” then getURLParams() does work correctly. It is just in the editor that it does not, as you explain. It think it would be helpful to add a note about this behaviour to the getURLParams() ref page. I’ll pursue that.

best,  
Toby
