window.open()で開いたドキュメント内要素へのループコンテキストを含むデータバインドがIE8-でエラーになる

[fukudayasuo]

IE8-でwindow.open()で開いたウィンドウのドキュメントに対してループコンテキストをバインドしようとするとエラーになります。

w = window.open(null); 
setTimeout(function(){
    w.document.body.innerHTML='<ul data-h5-loop-context="items"><li data-h5-bind="test"></li></ul>';
    h5.core.view.bind(w.document.body, {items:[{test:1}]});
}, 1000);
// SCRIPT5022: catch ステートメントでは適用されますが、throw ステートメントでは適用されません。 
// h5.dev.js, 行 11948 文字5

しかし、iframeで作成した別ドキュメントへのバインドの場合は問題ありません。

iframe = document.createElement('iframe');
document.body.appendChild(iframe);

setTimeout(function(){
    w = iframe.contentWindow;
    w.document.body.innerHTML='<ul data-h5-loop-context="items"><li data-h5-bind="test"></li></ul>';
    h5.core.view.bind(w.document.body, {items:[{test:1}]});},1000);
}, 1000);

また、loop-cotnextを含まないデータバインドの場合はエラーは出ません。

エラーの出ている箇所から推測すると、要素をループさせるために元々ある要素をクローンしたものをfragmentにappendChildしている箇所でエラーが出ているため、fragmentを生成したdocumentとクローンしたノードのownerDocumentが違うために起きているのかもしれません。(ただし、iframe内のdocumentの場合、同じ個所でエラーは出ないので、それだけではないと思われます)。

cloneNode箇所で、documentを指定してそのdocumentで要素を生成するようにしてみます。

テストの追加も行います。

[fukudayasuo]

対応しました。 クローンしたノードのownerDocumentが違うためにエラーが出ていました。 $(elm.outerHTML);でクローンしていたのを、$.parseHTML(elm.outerHTML, ownerDoc);のように、parseHTMLを使用して第2引数にドキュメントオブジェクトを渡すようにしてエレメントを生成するようにして対応しました。

window.open()した先のドキュメント内の要素にデータバインドを行うテストケースを追加し、テストケースはPCブラウザでのみテストするようにテストフィルタを掛けました。

[simdy]

parseHTMLを使用すると、jQuery1.7以下で動作しなくなると思われます。

parseHTMLは1.8で追加

$(elm.outerHTML, owerDoc) の形式での生成はできませんか？

(2013/11/06 10:48), fukudayasuo wrote:

対応しました。 クローンしたノードのownerDocumentが違うためにエラーが出ていました。 $(elm.outerHTML);でクローンしていたのを、$.parseHTML(elm.outerHTML, ownerDoc);のように、parseHTMLを使用して第2引数にドキュメントオブジェクトを渡すようにしてエレ メントを生成するようにして対応しました。

window.open()した先のドキュメント内の要素にデータバインドを行うテストケースを追加し、テストケースはPCブラウザでのみテストするようにテストフィルタを掛けました。

— Reply to this email directly or view it on GitHub https://github.com/hifive/hifivemain/issues/248#issuecomment-27833242.

新日鉄住金ソリューションズ株式会社 技術本部 システム研究開発センター ソフトウェアシステム研究部 下田　修　shimoda.osamu@ns-sol.co.jp

[fukudayasuo]

$(elm.outerHTML, owerDoc) の形式での生成はできませんか？

それで大丈夫でした。 $.parseHTML()の使用はやめて、$()を使用するように変更しました。