javascript - TypeScript : IFrame sandbox property undefined, DOMSettableTokenList 没有构造函数

Question

我在类型脚本中创建一个 iFrame 元素:

var iFrameElement : HTMLIFrameElement = document.createElement("iframe");
iFrameElement.sandbox.add('allow-forms');
iFrameElement.sandbox.add('allow-scripts'); 
iFrameElement.sandbox.add('allow-same-origin');

但是，sandbox 属性未定义，所以这里的 add(value: string) 失败。

我也不知道如何实例化沙箱属性，这是 lib.d.ts 中定义的接口(interface):

interface HTMLIFrameElement {
    sandbox: DOMSettableTokenList;
}
interface DOMSettableTokenList extends DOMTokenList {
    value: string;
}
interface DOMTokenList {
    length: number;
    contains(token: string): boolean;
    remove(token: string): void;
    toggle(token: string): boolean;
    add(token: string): void;
    item(index: number): string;
    [index: number]: string;
    toString(): string;
}

我在想这里只是有些语法我不知道如何使用，或者还有一些其他技巧可以使它正常工作。我在这个网站和整个互联网上进行了广泛的搜索，但结果并不是特别有用。

答案here不幸的是，在 TypeScript 中不起作用(类型“String”缺少类型“DOMSettableTokenList”中的属性“value”)，这让我想将一些对象转换为该类型。我看到 this guy似乎已经重新实现了该类型，但现在对我来说这似乎太老套了。

帮助我的 stackoverflow，你是我唯一的希望。

Answer 1

一般来说，如果你正在弄清楚一些特定于浏览器的实现，我建议你将(更改类型)转换为any，这样你甚至可以写:

(<any>iFrameElement).foo = "";

...但是在您的代码中做一些捕捉。

这将允许您将其用于 IE:

iFrameElement.sandbox.add('allow-forms');
iFrameElement.sandbox.add('allow-scripts');

对于 Chrome，这是

(<any>iFrameElement).sandbox = "allow-forms allow-scripts";