読者です 読者をやめる 読者になる 読者になる

jqueryを使い、ajaxでscriptタグを含む部分HTMLを取得すると、IEのみでエラーとなる

手元の再現環境

前提

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>test</title>
  </head>
  <body>
    <div id="contents"></div>
  </body>
</html>

というHTMLがあり、#contentsの中身は以下のスクリプトによって非同期に取得する。

$(document).ready(function() {
    $.ajax({
        url: "/get_contents",
        type: "GET",
        success: function(data) {
            $("#contents").html(data);
        }
    });
});

エラーなる条件

ajaxのレスポンス(/get_contetsのレスポンス)に、

  • scriptタグが含まれており、
  • jsコードがコメントされている

場合にエラーとなる。

<div>
Lorem ipsum dolor sit amet...
<div>
<script type="text/javascript">
<!--
some_function();
//-->
</script>

のようなレスポンスである。

ちなみにエラー詳細を見ても、行番号やエラー内容など、意味不明。

解決方法

コメントを取る。

<div>
Lorem ipsum dolor sit amet...
<div>
<script type="text/javascript">
some_function();
</script>