Question

假设我已将 html文件引用为 Blob b，并为其创建了一个网址url = URL.createObjectURL(b);。

这给了我一些看起来像blob:http%3A//example.com/a0440b61-4850-4568-b6d1-329bae4a3276

的东西

然后我尝试使用 GET 参数<iframe>在?foo=bar中打开此内容，但它不起作用。如何传递参数？

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

Answer 1

我认为在网址中添加查询字符串不会起作用，因为它实际上会将其更改为不同的网址但是，如果您只想传递参数，则可以使用散列将片段添加到URL

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

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

Answer 2

为了完整起见，如果您希望能够引用具有问号＆＃34;查询字符串＆＃34;的blob。其中的指标，您可以在Firefox中以您选择的任何方式执行此操作，例如：blob:lalalal?thisworksinfirefox

对于Chrome，以上操作不起作用，但这将是：blob:lalalla#?thisworksinchromeandfirefox

对于Safari和Microsaft，没有什么可行的，所以做一个这样的预测试，然后做出相应的计划：

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

Answer 3

如果您使用Javascript Blob（例如WebWorker）执行此操作，则只需将参数作为全局变量添加到Blob构造函数中即可：

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));

或更一般的情况是将原始网址存储在位置对象上

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));

如果您可以将它们说作为属性添加到根<HTML>标记中，或者将<BASE>元素用作url或将它们作为脚本标记插入，也可以使用HTML进行此操作您可以修改响应HTML，而不是只是添加一些额外的数据

将参数传递给BLOB对象URL

3 个答案: