我需要在主页和嵌入式 iframe
之间传递大量数据。
为了避免 [反] 序列化开销,我很乐意将 ArrayBuffer
与 postMessage()
一起传递,并在不同的 iframe
中实例化指向此缓冲区的 View >s。
但这种方法似乎行不通,因为 postMessage()
的 MDN 文档将 message
参数描述为:
Data to be sent to the other window. The data is serialized using the structured clone algorithm.
这似乎表明传递“指针”是不可能的,因为 postMessage()
实际上只传递字符串...
有解决办法吗?在主线程和工作线程之间传递可传输对象 效果很好。将 ArrayBuffer
传递给 node.js native 扩展的 C/C++ 代码也是如此。
最佳答案
您可以将您的消息作为一部分发送,并且每条消息在发送消息完成时都必须包含数据和长度两部分,然后您可以使用它,您也应该小心,如果您的数据真的很重要,那么您应该使用类似线程的方式'for' 框架我的代码;
发件人
HTML
<button id="send">Send Message</button>
<iframe id="receiver" src="receiver.html" width="500" height="200"></iframe>
Javascript
var receiver = document.getElementById('receiver').contentWindow;
var hugeData = '';
var hugeDataLen = 10000003;
var messagePartSize = 500;
function generateHugeData(){
var i = 0;
console.log(hugeDataLen / messagePartSize);
for(i=0;i<Math.floor(hugeDataLen/messagePartSize);i++){
hugeData += randomString(messagePartSize);
}
if(hugeDataLen>(messagePartSize*i)){
hugeData += randomString(hugeDataLen-(messagePartSize*i));
}
}
sendBigMessage = function(e) {
var messagePart = '';
var i = 0;
for(var i = 0; i < Math.floor(e.length/messagePartSize); i++) {
messagePart = e.substr(i*messagePartSize,messagePartSize);
receiver.postMessage({mydata: JSON.stringify(messagePart), len: e.length}, 'http://localhost:10080');
}
if(hugeDataLen>(messagePartSize*i)){
console.log(hugeDataLen-(messagePartSize*i));
messagePart = e.substr(i*messagePartSize,hugeDataLen-(messagePartSize*i));
receiver.postMessage({mydata: JSON.stringify(messagePart), len: e.length}, 'http://localhost:10080');
}
};
function randomString(len) {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < len; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
var btn = document.getElementById('send');
function sendMessage(e) {
sendBigMessage(hugeData)
}
btn.addEventListener('click', sendMessage);
generateHugeData();
console.log(hugeData);
接收者
HTML
<div id="message"></div>
脚本
var data = '';
window.onload = function() {
var messageEle = document.getElementById('message');
function receiveMessage(e) {
if (e.origin !== "http://localhost:10080")
return;
messageEle.innerHTML = messageEle.innerHTML + e.data.mydata;
var jsonData = JSON.parse( e.data.mydata);
console.log(jsonData);
data += jsonData;
if (data.length === e.data.len) {
alert('complete');
console.log(data);
}
}
window.addEventListener('message', receiveMessage);
}
关于javascript - 是否可以在 iframe 之间传递 ArrayBuffer?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46911091/