Developer
JavaScript LightningComponent LightningWebComponent LWC Salesforce

【Lightning Web Component】iframeの枠線の消し方

Developer
この記事は約3分で読めます。

こんにちは、アンダーソンです。
今回はLWC内でVisualforceを表示させる際などにiframeを使うこともあると
思うんですが、このiframeって枠線が表示されちゃうんですよね。

今回はその枠線の消し方についてやっていきたいと思います。

スポンサーリンク

枠線なんて簡単に消せるだろう。。

初めは僕もそう思っていました。
ググってみるとiframeの枠線の消し方は普通にあることで
iframeタグに対して下記の設定をすればOKとのことでした。

frameborder="0"

この属性を設定するだけ。
よしよし、こんな簡単なんだったらさっとやっちゃおう。
ってことでやってみると。。。

しっかりエラーで弾かれます

デプロイしようとすると

LWC1057: frameborder is not valid attribute for iframe. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

frameborderはiframeの有効な属性ではありません

なぜだ。。。笑
まじかよってなりましたが、いろいろ検索していくとしっかり回避方法がありましたので解説していこうと思います。

レンダリング時にiframeを生成する

直接タグに書くとエラーになりますが、
裏側でレンダリング時に対象のDOMの子要素として作成した
iframeを用意し、追加することでこの属性を追加することができます。
下記にコードのサンプルを書いておきます。

<div class="iframe-container" lwc:dom="manual"></div>
renderedCallback(){
    if (this.isRendered) return;
    this.isRendered = true;

    const containerElem = this.template.querySelector('.iframe-container');
    const iframe = document.createElement('iframe');

    iframe.src = this.URL;
    iframe.id = 'iframe-1';
    iframe.width = '100%';
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('scrolling', 'no');
    containerElem.appendChild(iframe);
}

こうしてあげれば当初の枠線を消すことができます。
ここではスクロールもできなくしていますが、スクロールは普通にタブからセットできるんですが都合上ここでセットしています。

まとめ

まさかこんな落とし穴があるとは思わず、
余裕綽綽でタグに属性追加したら使えないよって言われたのでなんとかできないかと
迂回方法を模索したのが上記内容です。

是非参考になれば嬉しいです。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。

スポンサーリンク