none
IEでのみappendChildを使用すると「このオブジェクトはサポートされていない操作です」例外が発生する。 RRS feed

  • 質問

  • 毎度お世話になります。

    タイトルの通り、質問させていただきます。

    当方、MVCアプリで選択(select file,Drag&Dropで選択)したファイルの中身を、
    テキストエリアに表示する機能を実装しています。

    この機能が、Google Chrome,Fire Fox,Edge(全て最新)では期待通りに動作するのですが、
    IE(11)でのみ、テキストエリアの要素に対してappendChildを実行すると、
    「このオブジェクトではサポートされていない操作です。」例外が発生してしまいます。
    (なお、appendChildさえ問題なく動けば、後の処理は動作することは確認が取れています。)

    この現象についてWEBで調べてみましたが、
    解決策が見付からない(IEのバグ?仕様?という情報もあったような・・・)現状です。

    本件、何か解決策・回避策・アドバイス等ありましたら、ご意見戴けたら幸いです。

    該当箇所のコードを以下に記載します。(一部省略しています。)

    <div>
        <label for="file_upload">
            <input type="file" id="fileSelect" onchange="$('#fake_text_box').val($(this).val())">
        </label>
    </div>
    <div>
        <p>
            <textarea type="text" id="dataText" value="test" rows="25" cols="100"></textarea>
        </p>
    </div>

    var fileSelectName = document.getElementById('fileSelect');
    var dataTextArea = document.getElementById('dataText');
    
    fileSelectName.onchange = function () {
        var fileReader = new FileReader();
    
        fileReader.onload = function () {
    
            if (dataTextArea.hasChildNodes())
            {
                dataTextArea.removeChild(dataTextArea.childNodes[0]);
            }
    
            try
            {
                // IEでのみ、「このオブジェクトではサポートされていない操作です」が発生。
                dataTextArea.appendChild(new Text(this.result));
            }
            catch(e)
            {
                alert(e.message);
            }
    
    		// 省略
        }
    
    		// 省略
    }

    関係ないとは思いますが、開発はVS2015Proで行っております。

    以上、よろしくお願いいたします。

    2018年7月27日 6:03

回答

  • 手元で確認した限り、appendChildではなく、new Textに失敗しているように見えます。

    valueプロパティで設定するか、appendChildに拘るのであればdocument.createTextNodeを使ってみてはどうでしょうか。

    • 回答としてマーク D-Hiro 2018年7月27日 8:47
    2018年7月27日 7:03
  • IE は Text() コンストラクタをサポートしてないようです。

    Text
    https://developer.mozilla.org/en-US/docs/Web/API/Text

    何がしたいのですか?

    <input type="file" ... でのファイルの選択完了の change イベントで FileReader に選択されたファイルの内容を読み込み(readAsText とか読み込む手順がないようですが省略?)、それを textarea に表示できればいいのですか?
    • 回答としてマーク D-Hiro 2018年7月27日 8:47
    2018年7月27日 7:36

すべての返信

  • 手元で確認した限り、appendChildではなく、new Textに失敗しているように見えます。

    valueプロパティで設定するか、appendChildに拘るのであればdocument.createTextNodeを使ってみてはどうでしょうか。

    • 回答としてマーク D-Hiro 2018年7月27日 8:47
    2018年7月27日 7:03
  • IE は Text() コンストラクタをサポートしてないようです。

    Text
    https://developer.mozilla.org/en-US/docs/Web/API/Text

    何がしたいのですか?

    <input type="file" ... でのファイルの選択完了の change イベントで FileReader に選択されたファイルの内容を読み込み(readAsText とか読み込む手順がないようですが省略?)、それを textarea に表示できればいいのですか?
    • 回答としてマーク D-Hiro 2018年7月27日 8:47
    2018年7月27日 7:36
  • Hongliang様

    ご回答ありがとうございます。

    諸事情があり、単純にvalueプロパティに設定できないのです。
    document.createTextNodeでも試してみます。
    また、SurferOnWww様様がご回答されたように、
    そもそもIEでText()コンストラクタをサポートしていないのが根本原因のようでした。

    Hongliang様、SurferOnWww様のアドバイスをもとに、
    Text()コンストラクタを使用せず、document.createTextNodeを使用してthis.resultを渡した所、期待通りの動作となりました。
    ありがとうございます。

    解決致しましたので、本件はクローズとさせて頂きます。
    ありがとうございました。
    2018年7月27日 8:45
  • SurferOnWww様

    ご回答ありがとうございます。

    readAsTextで読み込む手順は、上記のコードでは省略させて頂いています。

    ご質問の通り、ファイルの内容が表示できれば良いです。
    ただ、すでにその処理は出来上がっており、IE以外のブラウザで期待通り動作していることは確認済みです。

    SurferOnWww様、Hongliang様
    Text()コンストラクタを使用せず、document.createTextNodeを使用してthis.resultを渡した所、期待通りの動作となりました。
    ありがとうございます。

    解決致しましたので、本件はクローズとさせて頂きます。
    ありがとうございました。
    2018年7月27日 8:46
  • クローズしたとのことなのに、今さらながらのレスですが、気になることがあったので・・・

    > Text()コンストラクタを使用せず、document.createTextNodeを使用してthis.resultを渡した所、期待通りの動作となりました。

    質問者さんのコード onchange="$('#fake_text_box').val($(this).val())" を見ると jQuery を使っているようですが、それならもっと簡単に  $('#dataText').val(this.result); で OK なはずです。

    あと、FileReader.readAsText() メソッドで読込処理が終了すると発生するのは loadend イベントのはずです。質門者さんのコードでは load イベントを使っていますが、loadend イベントを使った方が良いのではないでしょうか。

    FileReader.readAsText()
    https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsText

    以下のコードで検証して、上記コメントが間違いないことを確認しました。(form 要素の設定がファイルをアップロードできるようになってませんが、そこは今回の話とは関係ないので無視してください)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="0045-appendChild.aspx.cs" 
        Inherits="_0045_appendChild" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script type="text/javascript">
        //<![CDATA[
            $(function () {
                // ブラウザの HTML5 File API サポートを確認。サポートしてないとエラーが出る
                if (window.File && window.FileReader && window.FileList) {
                    var fileReader = new FileReader();
    
                    // readAsText で読み込みが完了すると loadend イベントが発生
                    fileReader.onloadend = function () {
                        $('#dataText').val(this.result);
                    };
    
                    // FileUpload1 でファイルの選択が完了すると change イベントが発生する
                    $("#fileSelect").on('change', function () {
                        var fileUpload = document.getElementById("fileSelect");          
    
                        // fileReader オブジェクトに FileUpload1 で選択されたファイルを読み込む
                        fileReader.readAsText(fileUpload.files[0]);
                    });
                }
            });      
        //]]>
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <label for="file_upload">
                <input type="file" id="fileSelect" onchange="$('#fake_text_box').val($(this).val())" />
            </label>
        </div>
        <div>
            <p>
                <textarea type="text" id="dataText" value="test" rows="25" cols="100"></textarea>
            </p>
        </div>
            <input id="fake_text_box" type="text" />
        </form>
    </body>
    </html>

    実行結果は以下のようになります。input type="file" で選択したテキストファイルは、上の私のレスをメモ帳にコピペして UTF-8 で保存したものです。



    • 編集済み SurferOnWww 2018年7月28日 3:26 訂正
    2018年7月28日 3:25