1. ホーム
  2. javascript

[解決済み] TypeScript 。IFrameのサンドボックスプロパティが未定義、DOMSettableTokenListのコンストラクタがない

2022-02-19 23:12:14

質問

タイプスクリプトでiFrame要素を作成しています。

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

しかし、サンドボックスのプロパティは未定義なので、ここでのadd(value: string)は失敗します。

サンドボックスプロパティのインスタンス化の方法もわかりません。以下は lib.d.ts で定義されているインターフェースです。

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

私が知らない構文があるだけなのか、それとも何か他に動作させるためのコツがあるのかと思っています。このサイトやインターネット上で広範囲に検索してみましたが、結果は特に役に立ちませんでした。

答え こちら Type 'String' には 'DOMSettableTokenList' のプロパティ 'value' がない)そのため、何らかのオブジェクトをその型にキャストしたい。なるほど こいつ この型を再実装しているようですが、今の私にはあまりにハチャメチャに思えます。

スタックオーバーフローを助けてください、あなたが私の唯一の希望です。

どのように解決するのですか?

一般に、ブラウザ固有の実装を考えているのであれば、キャスト(型変更)して any というような書き方でも大丈夫です。

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

... しかし、あなたのコードにいくつかのキャッチを作成します。

これでIEでも使えるようになります。

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

そしてこれがChromeの場合。

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