Pass parameter to BLOB object URL

Asked 20/12, 2014 at 14:51 Answered 20/2, 2020 at 9:45

Solved javascript html blob parameter-passing

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

Beret answered 20/12, 2014 at 14:51 Comment(3)

What are you trying to achieve by doing that? – Greeneyed 20/12, 2014 at 14:53

Exactly what I said: passing a parameter – Beret 20/12, 2014 at 14:56

Pass a parameter to achieve what? – Greeneyed 20/12, 2014 at 15:4

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/

Greeneyed answered 20/12, 2014 at 15:25 Comment(1)

This is not working in Safari. Any solution for Safari? – Fleshings 1/9, 2017 at 8:38

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")
    }
}

Zebec answered 11/1, 2017 at 5:59 Comment(0)

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

Jolynnjon answered 20/2, 2020 at 9:45 Comment(0)

Recommended topics

Hot tags