Pass parameter to BLOB object URL

Question

Say I've got a reference to a html file as a Blob b and I create a URL for it, url = URL.createObjectURL(b);.

This gives me something that looks like blob:http%3A//example.com/a0440b61-4850-4568-b6d1-329bae4a3276

I then tried opening this in an <iframe> with a GET parameter ?foo=bar, but it didn't work. How can I pass the parameter?

var html ='<html><head><title>Foo</title></head><body><script>document.body.textContent = window.location.search<\/script></body></html>',
    b = new Blob([html], {type: 'text/html'}),
    url = URL.createObjectURL(b),
    ifrm = document.createElement('iframe');
ifrm.src = url + '?foo=bar';
document.body.appendChild(ifrm);

// expect to see ?foo=bar in <iframe>

DEMO

What are you trying to achieve by doing that?

Musa
– Musa

2014-12-20 14:53:23 +00:00
Commented Dec 20, 2014 at 14:53 — Musa
– Musa, Commented Dec 20, 2014 at 14:53
Exactly what I said: passing a parameter

user3534974
– user3534974

2014-12-20 14:56:20 +00:00
Commented Dec 20, 2014 at 14:56 — user3534974
– user3534974, Commented Dec 20, 2014 at 14:56
Pass a parameter to achieve what?

Musa
– Musa

2014-12-20 15:04:41 +00:00
Commented Dec 20, 2014 at 15:04 — Musa
– Musa, Commented Dec 20, 2014 at 15:04

Musa · Accepted Answer · 2014-12-20 15:25:47Z

10

I don't think adding a query string to the url will work as it essentially changes it to a different url.
However if you simply want to pass parameters you can use the hash to add a fragment to the url

ifrm.src = url + '#foo=bar';

http://jsfiddle.net/thpf584n/1/

answered Dec 20, 2014 at 15:25

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

patrick Over a year ago

This is not working in Safari. Any solution for Safari?

gerneio Aug 29 at 18:31

FYI, just tried under Safari & iOS 18.5 and both worked fine (the fiddle shows the correct hash within the iframe body). Also confirmed same behavior on latest Firefox and Chromium.

Seph Reed · Accepted Answer · 2017-01-11 05:59:20Z

For completeness sake, if you want to be able to reference a blob that has as question mark "query string" indicator in it, you can do so in Firefox any way you choose, such as: blob:lalalal?thisworksinfirefox

For Chrome, the above will not work, but this will: blob:lalalla#?thisworksinchromeandfirefox

And for Safari and Microsaft, nothing really works, so do a pre test like so, then plan accordingly:

 function initScriptMode() {
  var file = new Blob(["test"], {type: "text/javascript"});
  var url = URL.createObjectURL(file) + "#test?test";

   var request = new XMLHttpRequest();
    request.responseType = responseType || "text";
    request.open('GET', url);


    request.onload = function() {
        alert("you can use query strings")
    };

    try {
        request.send(); 
    }
    catch(e) {
        alert("you can not use query strings")
    }
}

Daniel Worthington-Bodart · Accepted Answer · 2020-02-20 14:14:05Z

If you are doing this with a Javascript Blob for say a WebWorker then you can just to add the parameters into the Blob constructor as a global variable:

const parameters = 'parameters = ' + JSON.stringify({foo:'bar'});
const body = response.body; // From some previous HTTP request
const blob = new Blob([parameters, body], { type: 'application/javascript' });
new Worker(URL.createObjectURL(blob));

Or more general case just store the original URL on the location object

const location = 'location.originalHref = "' + url + '";';
const body = response.body; // From some previous HTTP request
const blob = new Blob([location, body], { type: 'application/javascript' });
new Worker(URL.createObjectURL(blob));

You could also do this with HTML if you can add them say to the root <HTML> tag as attributes or use the <BASE> element for the url or insert them as a script tag but this would require you to modify the response HTML rather then just prepend some extra data

Collectives™ on Stack Overflow

Pass parameter to BLOB object URL

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related