cloneInto()
此函式提供了一種安全的方式,可以將特權作用域中定義的`object`複製到特權較低的作用域中,並建立一個結構化克隆。它返回克隆的引用。
const clonedObject = cloneInto(myObject, targetWindow);
然後,您可以將克隆體分配給目標作用域中的物件作為`expando`屬性,並且在該作用域中執行的指令碼可以訪問它。
targetWindow.foo = clonedObject;
這使得特權程式碼(例如擴充套件)能夠與特權較低的程式碼(例如網頁尾本)共享`object`。
語法
let clonedObject = cloneInto(
obj, // object
targetScope, // object
options // optional object
);
引數
obj-
object。要克隆的`object`。 targetScope-
object。要將`object`附加到的`object`。 options可選-
object。函式的選項。cloneFunctions可選-
boolean。是否應克隆`object`的函式。預設為false。克隆的函式具有與使用exportFunction匯出的函式相同的語義。請參閱克隆包含函式的物件。 可選 wrapReflectors可選-
boolean。是否應透過引用傳遞DOM物件而不是克隆。DOM物件通常不可克隆。預設為false。請參閱克隆包含DOM元素的`object`。
返回值
克隆`object`的引用。
示例
此內容指令碼建立一個`object`,將其克隆到內容視窗中,並將其作為內容視窗全域性的一個屬性。
// content script
const addonScriptObject = { greeting: "hello from your extension" };
window.addonScriptObject = cloneInto(addonScriptObject, window);
頁面中執行的指令碼可以訪問該`object`。
// page script
button.addEventListener("click", () => {
console.log(window.addonScriptObject.greeting); // "hello from your extension"
});
當然,您不必將克隆體分配給`window`本身;您可以將其分配給目標作用域中的其他`object`。
// Content script
window.foo.addonScriptObject = cloneInto(addonScriptObject, window);
您也可以將其傳遞給頁面指令碼中定義的函式。假設頁面指令碼定義了一個如下的函式:
// page script
function foo(greeting) {
console.log(`they said: ${greeting.message}`);
}
內容指令碼可以定義一個`object`,克隆它,然後將其傳遞給該函式。
// content script
const addonScriptObject = { message: "hello from your extension" };
window.foo(cloneInto(addonScriptObject, window)); // "they said: hello from your extension"
克隆包含函式的物件
如果待克隆的`object`包含函式,您必須傳遞{ cloneFunctions: true }標誌,否則會出錯。如果您傳遞此標誌,則`object`中的函式將使用與exportFunction中使用的相同機制進行克隆。
// content script
const addonScriptObject = {
greetMe() {
alert("hello from your extension");
},
};
window.addonScriptObject = cloneInto(addonScriptObject, window, {
cloneFunctions: true,
});
// page script
const test = document.getElementById("test");
test.addEventListener("click", () => {
window.addonScriptObject.greetMe();
});
克隆包含DOM元素的`object`
預設情況下,如果您要克隆的`object`包含從C++反射的物件(例如DOM元素),則克隆操作會因錯誤而失敗。如果您傳遞{ wrapReflectors: true }標誌,則您克隆的`object`將包含這些物件。
// content script
const addonScriptObject = {
body: window.document.body,
};
window.addonScriptObject = cloneInto(addonScriptObject, window, {
wrapReflectors: true,
});
// page script
const test = document.getElementById("test");
test.addEventListener("click", () => {
console.log(window.addonScriptObject.body.innerHTML);
});
在目標作用域中訪問這些`object`將受到正常的指令碼安全檢查的約束。
瀏覽器相容性
載入中…