HTML object要素での外部ファイル読み込みのメモ2

発生した問題内容

object要素を使用して外部テキストファイルを読み込むHTMLファイルを作成し、Chromeで表示したが、onloadに設定した関数が実行されなかった。

 

・テキストファイルのデータをスクリプトから利用する目的のためobject要素は非表示

 ・Edge、FireFoxではonloadに設定した関数が実行できた

Chromeではテキストファイルの読み込み処理自体が発生していない(DevToolで確認)

 

解決の概要

object要素のスタイル指定を、display:none から visibility:hidden に変更したところ、Chromeでもload処理が発生して関数が実行できた。

 

HTML内容

Chromeでloadされなかったスタイル指定

<object data="data.txt" type="text/plain" style="display:none" onload="console.log('none')"> </object>

 

Chromeでもloadされたスタイル指定

<object data="data.txt" type="text/plain" style="visibility:hidden" onload="console.log('hidden')" > </object>

 

作成したHTMLページでは、動的にobject要素を作成しファイルを読み込むため、要素を完全に隠しておきたかったがこの回避案で対策とした。

高さも0にしてしまえば表示領域も変化しないかもしれない。