Program

iOS7のブックマークレットでwindow.open()を使うと挙動がおかしい

Posted on

こんばんは、ころすけ(@wg_koro)です。

iPhone iOS7

私のiPhoneはiOS7(7.0.2)にしているのですが、こいつのSafariで変な挙動を発見。

ブックマークレットでwindow.open()すると、オープンしたページがアクティブにならない。

ただのタップだと大丈夫

下記のようなページを用意して、Aリンクをタップする。 実際のデモページ
デモページ

[html title=”from.html”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Window openテスト</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes,maximum-scale=2.0">
<script type=’text/javascript’>
function open_window(){
window.open(‘./opened.html’);
}
</script>

<style type=’text/css’>
#open {
display : block;
text-align : center;
border : 1px solid red;
width : 100px;
height : 40px;
padding : 20px 0;
background-color: red;
color : #fff;
text-decoration : none;
}
</style>
</head>
<body>

<a href=’javascript:open_window();’ id=’open’>開く</a>

</body>
</html>
[/html]

タップすれば、「Opened!」と書かれたページがフォアグラウンドで開く。これは期待した動作で問題なし。
opened!ページ

ブックマークレットだとアカン

次に、下記のようなjavascriptをブックマークレットで実行する。

[javascript]
javascript:(function(){window.open(‘http://zafiel.wingall.com/data/windowopen_test/opened.html’)})()
[/javascript]

ブックマークレット登録ページ
※一度上記ページをブックマーク登録して、ブックマーク編集からURLを編集。URLの「javascript」より前の文字を削除するとブックマークレットとして使えます

そうすると「開く」ボタンがあるページはそのまま。画面に変化なし。その代わり、バックグラウンドで「Opened」ページが開かれている。なので、一見何も動作していないように見えてしまう。
バックグラウンドで開いちゃう

本来は「Opened!」の画面が表示されなければならないはず。…Safariのバグだよなぁ。

ブックマークレットを使って様々なページをWebサービスに登録しているのですが、最近うまく動かない。なんだ？と思ったらこんなオチでした。iOS7のSafariは色々変なバグがあって本当困ります…。

こちらの記事もあわせてどうぞ

,

2件のコメント

  1. 私も自前のオンラインブックマークなどブックマークレットから利用していたので、困っていましたが、以下の方法で、この問題はひとまず解消できるようです。

    1．ブックマークレットの登録先を「お気に入り」または自分で設定しているお気に入りフォルダにする
    2．動作させたいページでアドレスバーをタップし、表示されたブックマークレットを実行

    この場合は、window.openしたページにフォーカスされます。

  2. おおお、こんな手があったのか！これだと問題なくフォーカスされますね。
    これまで微妙に不便で困ってたんですが、大変助かりました！ありがとうございます！！

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。