7cc@はてなブログ

JavaScriptとかとか

IEで「オブジェクトを指定してください」のエラー

エラーメッセージを言い換えると分かった。

「オブジェクトを指定してください」
「オブジェクトが指定されていないよ」
「オブジェクトが無いよ」
「オブジェクトがundefinedだよ」

原因

3通りあるようだ

原因1 古いIE文字コード

IEの謎エラー対策(1) 「オブジェクトを指定して下さい」が外部ソースの場合 - 趣味の延長線 の通り、charsetを指定する。

原因2 関数が未定義

  • (最新版含む)そのバージョンのIEでは使えない関数を使用している
  • ファイルを読み込む順序が間違っている
  • グローバル変数が上書きされている($とか)
  • typo(スペルミス)

var hoge
hoge(1)  // "オブジェクトを指定してください。"

原因3 関数の後にセミコロン忘れ

(function(){})()
(function(){})()

戻り値の無い関数はundefinedを返す。
分かりやすいようにfunctionalertに置き換えて整理すると、

(alert)() // =undefined
(alert)()

そしてこうなる。

undefined(alert)()

この時、

undefined()

という式を実行しようとする。原因2と同じように、関数ではないものを実行しようとしているのでエラー。

余談、エラーメッセージについて

obj.propの形の関数だと少し分かりにくい。

Math.foo(1) 

"オブジェクトは 'foo' プロパティまたはメソッドをサポートしていません。"

[Math.foo].map(function(e){
  return e(1)
}) 

"オブジェクトを指定してください。"

同じことなら、同じエラーメッセージにして欲しい。

はてなブログでのMarkdownの不具合・仕様

不具合報告も兼ねて。
報告済み・仕様との回答を頂いたものは見出しに記載。

Markdownはパーサが色々有り、またサービスによって独自の機能を提供しているものもあるので、なかなか厄介だと思った。

の3つで試した。

普通の環境

は以下とした。

もっとも、Markdownはどれが普通とは言い難いけれども。
(厳密には、dillingerは記事を書いている途中で仕様変更があったらしく、面倒になってメモをやめた。)

リストのネスト (仕様)

olが親要素の時にスペースが3つ要る

1. aa
   1. bb ← ここのスペースが3つ要る
2. aa

ulが親要素の場合は2スペースで足りる

- aa
  - bb
- aa

リストの次の行にブロックレベル要素

タグを直接書いた場合

- li
<p>para</p>
md liの子要素となるか
普通 なる
GitHub なる
はてな ならない

同じ行に書けば子要素になる

- li<p>hello</p>
- li<pre>1
2</pre>

リストとMarkdonw記法

一貫性が無い。

リストとblockquote

liの子要素となる。

- li
>blq

リストとpre (仕様)

liの子要素に、シンタックスハイライト付のpreが不可

- li
\```html
<html>A
\```

------------------------

- li
  ```html
  <html>B
  ```

------------------------

- li

  ```html
  <html>C
  ```
md A B C
普通 ul>li+pre ul>li+pre ul>li>p+pre
GitHub ul+pre ul>li>code ul>li>p+pre
はてな ul+pre ul>li>code ul>li>p+p>code

表示参考のgist

「リストとシンタックスハイライトのないpre」ならば、はてなでも可能。

*   A list item with a code block:

        code
        code

pre

preの属性が付与されない (報告済み)

言語を指定しないpreを最初に使うと、後のpreに属性が設定されなくなる
CSS/JSのセレクタ指定に影響。

\```
はるはあけぼの
\```

\```javascript
var foo = 1 // `class="code lang-XX" data-lang="XX"`の指定がなくなる
\```

自動リンクとpre

<pre>タグで書いた時だけ自動リンクになる。

はてな これはMarkdown(`*3)で書きました
はてな これはMarkdown(インデント4つ)で書きました
はてな これはpreで書きました

タグの中の```がpre要素になる。

  1. HTMLタグの中ではMarkdown記号は要素にならず、そのまま扱われるはず。
  2. 実際、>, -などの記号はそのまま。
  3. ところが、```はpre要素になる。
<div>
\```
なつはあつい
\```
</div>

次のようなHTMLが出力される。

<div>
<pre class="code" data-unlink="">なつはあつい</pre>
</div>

上記の「なつはあつい」中のdivの閉じタグ</div>がハイライトされていないのはそのため。 並べてみると分かりやすい。

<div>
\```
なつはあつい
\```
</div>
<div>
`
なつはあつい
`
</div>

(この投稿は`の前にバッククオートを入れてスクリプトで消している。そうしないとこの表示が得られないので。)

タブがスペースに変換される

3~4スペースになる。ソースコード貼ったら困る人もいそう。

<dfn>タグの次のテキストがp要素になる

パーサでdfnがブロックレベル要素に分類されている?

入力

<i>a</i>b
<dfn>a</dfn>b

出力

<p><i>a</i>b</p>
<dfn>a</dfn>
<p>b</p>

tex記法

数式を表示する(tex記法) - はてなダイアリーのヘルプにある記述をそのまま貼り付けるとこうなる

[tex:x2 + y2 = z2] e^{i\pi} = -1

(そもそも、はてなブログtex記法をサポートしているのか不明。)

CSS transformが効かない

CSS transformの適用される要素は決まっていて、仕様ではtransformable elementsと呼ばれる。 そのため、他の要素に使おうとしても効かない。

transformable elements(変形可能要素) = transformが使える要素

  • Block-level elements (divとか)
  • atomic inline-level boxes:
    replaced inline-level elements, inline-block elements, and inline-table elements
    (置換インライン要素: img, input, buttonなど)
  • CSS display: table-* が指定された要素
  • SVG (IE9だと効かない)

つまり適用されない要素は

  • 普通のinline要素 = 非置換インライン要素。span, em, など。
  • あとは・・・何だろう?

参照

element.ownerDocument.defaultView.frameElement

iframe traversal iframe, window, documentを移動する window document iframe[name=foo] window document element window.top window.parent window.foo window.frames[n] window[n] document contentWindow frameElement contentDocument defaultView ownerDocument

実はこのエントリはSVGの練習も兼ねていたり。上の画像のテキストは選択可能。
IE9だと矢印の一部が表示されませんorz。

続きを読む