Is there generic way to detach ArrayBuffer in any browsers?

To detach an ArrayBuffer you can use ArrayBuffer.prototype.transfer()

The transfer() method of ArrayBuffer instances creates a new ArrayBuffer with the same byte content as this buffer, then detaches this buffer.

const buffer = new ArrayBuffer(8);
console.log(buffer.detached); // false
const newBuffer = buffer.transfer();
console.log(buffer.detached); // true
console.log(newBuffer.detached); // false

Old answer / Alternative for browsers that do not support .transfer()

You can now detach an ArrayBuffer by using structuredClone with transferables argument.

An array of transferable objects in value that will be moved rather than cloned to the returned object.

// this detaches the buffer
structuredClone(arrayBuffer, { transfer: [arrayBuffer] });

function moveBuffer(arrayBuffer) {
  return structuredClone(arrayBuffer, { transfer: [arrayBuffer] });
}

const buffer = new Uint8Array([1]).buffer;
const moved = moveBuffer(buffer);
console.log(buffer.byteLength === 0); // detached
console.log(moved.byteLength === 1);

Not yet, but there is a proposal to introduce such a method.

function detachBuffer(buffer) {
  try {
    postMessage('', '', [buffer]);
  } catch { }
}

Many of the solutions here have the problem of creating a new backed ArrayBuffer. However, you can use structuredClone in an unusual way to accomplish this:

function detachBuffer(arrayBuffer) {
  structuredClone(null, { transfer: [arrayBuffer] });
}

The docs for transferable objects notes:

For both postMessage() and structuredClone(), transferred resources have to be attached to the data object, otherwise they would not be available on the receiving end, because the transferable array only indicates how certain resources should be sent, but does not actually send them (although they would always be detached).

In our case, this is exactly what we want - the resource being detached without being cloned. This is also why the .transfer() method is not helpful in this case.