<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>さくらたんどっとびーず &#187; JavaScript</title>
	<atom:link href="http://sakuratan.biz/archives/tag/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://sakuratan.biz</link>
	<description>モロモロ工事中です</description>
	<lastBuildDate>Sun, 25 Jun 2023 12:51:51 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>クロスブラウザでdocument.createElement(&#8216;iframe&#8217;)した要素のonloadを呼び出す方法</title>
		<link>http://sakuratan.biz/archives/5044</link>
		<comments>http://sakuratan.biz/archives/5044#comments</comments>
		<pubDate>Tue, 11 Oct 2011 15:38:57 +0000</pubDate>
		<dc:creator>さくら</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[DOM]]></category>

		<guid isPermaLink="false">http://sakuratan.biz/?p=5044</guid>
		<description><![CDATA[&#8230;&#8230;.φ（．．）ﾒﾓﾒﾓです。 document.createElement(&#8216;iframe&#8217;) で作った DOM 要素に onload をセットする場合以下のようなコードを使います。 var iframe = document.createElement&#40;'iframe'&#41;; var onload_func = function&#... <div style="margin-top:1ex"><a href="http://sakuratan.biz/archives/5044">(続きを読む)</a></div>]]></description>
			<content:encoded><![CDATA[<p>&#8230;&#8230;.φ（．．）ﾒﾓﾒﾓです。</p>
<p>document.createElement(&#8216;iframe&#8217;) で作った DOM 要素に onload をセットする場合以下のようなコードを使います。</p>
<div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> iframe <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'iframe'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #003366; font-weight: bold;">var</span> onload_func <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #006600; font-style: italic;">// onload で実行する処理</span><br />
<span style="color: #009900;">&#125;</span><br />
<br />
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">all</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span>window.<span style="color: #660066;">opera</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #006600; font-style: italic;">// IE の場合 onreadystatechange が必要</span><br />
&nbsp; &nbsp; iframe.<span style="color: #660066;">onreadystatechange</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>iframe.<span style="color: #660066;">readyState</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;complete&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onload_func<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #006600; font-style: italic;">// IE 以外なら onload で良い</span><br />
&nbsp; &nbsp; iframe.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; onload_func<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span> &nbsp; <br />
<span style="color: #009900;">&#125;</span><br />
<br />
iframe.<span style="color: #660066;">src</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'...'</span><span style="color: #339933;">;</span><br />
parentNode.<span style="color: #660066;">appendChild</span><span style="color: #009900;">&#40;</span>iframe<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></div>
<p>コメントにも書いてますが、IE8 以下の場合 onreadystatechange を使う必要があります。</p>
<h3>参考サイト</h3>
<ul>
<li><a href="http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/">Iframes, onload, and document.domain | NCZOnline</a></li>
</ul>
<h3>あまり参考にならなかったサイト</h3>
<ul>
<li><a href="http://support.microsoft.com/kb/239638/ja">PRB: OnReadyStateChange および IFrame を起動しない OnLoad イベント &#8211; support.microsoft.com</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://sakuratan.biz/archives/5044/feed</wfw:commentRss>
		<slash:comments>530</slash:comments>
		</item>
		<item>
		<title>arguments.calleeとsetTimeoutを使ってJavaScriptのリトライ処理を簡単に書く方法</title>
		<link>http://sakuratan.biz/archives/2131</link>
		<comments>http://sakuratan.biz/archives/2131#comments</comments>
		<pubDate>Fri, 02 Jul 2010 08:50:40 +0000</pubDate>
		<dc:creator>さくら</dc:creator>
				<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://sakuratan.biz/?p=2131</guid>
		<description><![CDATA[jQuery のソースから拾ってきたネタなんすが、arguments.callee と setTimeout を使ったリトライ処理が超便利なのでご紹介。 まず基本形はこんな感じす。 (function() { // なんか処理 if (error) { setTimeout(arguments.callee, 20); } })(); 上のコードは error が真のとき20マイクロ秒後に無名関数... <div style="margin-top:1ex"><a href="http://sakuratan.biz/archives/2131">(続きを読む)</a></div>]]></description>
			<content:encoded><![CDATA[<p>jQuery のソースから拾ってきたネタなんすが、arguments.callee と setTimeout を使ったリトライ処理が超便利なのでご紹介。</p>
<p style="margin-top:3em">まず基本形はこんな感じす。</p>
<pre>
(function() {
    // なんか処理
    if (error) {
        setTimeout(arguments.callee, 20);
    }
})();
</pre>
<p>上のコードは error が真のとき20マイクロ秒後に無名関数の実行をリトライします。20マイクロ秒だとリトライ間隔が短いような気がするかもしれませんが、リトライ回数は1秒に50回ですので言うほどでもないです。</p>
<p>arguments.callee は関数内でのみ参照可能で、実行中の関数自身への参照を保持します。上の例では arguments.callee は無名関数への参照となります。setTimeout に arguments.callee を渡すその関数を再実行することになります。</p>
<p style="margin-top:3em">実用的なケースで言うと ajax のエラー処理なんかどうでしょう。</p>
<p>ぶっちゃけ ajax のプログラム書いてると、403 とか 404 とかじゃないエラーは一定時間したらリトライさせたいとか多いんじゃないでしょうか。500 とかだいたいバグですし、ネットワークタイムアウトのときはマジでリトライしたい訳ですし。</p>
<p>そんな時こそ arguments.callee ですよ奥さん！！wコードが簡単になること請け合いです。</p>
<pre>
(function() {
    var callee = arguments.callee;
    $.ajax({
        url: 'http://...',
        error: function(xhr, status, e) {
            switch (xhr.status) {
            case 403: case 404:
                throw(xhr.status + ' ' + xhr.statusText);
                break;
            default:
                setTimeout(callee, 60000);    // 60000ms = 1分
                break;
            }
        }
    });
})();
</pre>
<p>error ハンドラの無名関数内で arguments.callee を参照すると error ハンドラそのもの（function(xhr, &#8230;) の方）になりますので、リトライしたい範囲を無名関数で括ってその arguments.callee を（一旦変数に入れてから）呼び出す必要があります。</p>
<p style="margin-top:3em">この方法の便利なところは、エラーによるリトライが後から必要になった場合でも、リトライが必要な箇所を無名関数で括ってしまえば良いだけなので記述が簡単な点です。</p>
<p>似たような処理を setInterval を使って書くこともできますが、リトライを止める時に clearInterval を呼び出さないといけないが結構面倒だったりします。どの程度面倒かは自分で比べてかーさい。</p>
<p style="margin-top:3em">ということで、ある処理が成功するまでリトライするコード（は JavaScript では割と出てくると思います）を書くなら、arguments.callee と setTimeout を組み合わせた方が便利だよっつーお話ですた。</p>
<p><img src="http://sakuratan.biz/blog/wp-content/plugins/sakura-icons/icon2.png" width="160" height="160" border="0" style="border:0;float:left" /><br />
てゆーか arguments.callee ちゃんマジ便利www<br />
<br clear="left" /></p>
<p><a href="http://sakuratan.biz/archives/2171">続く…</a></p>
]]></content:encoded>
			<wfw:commentRss>http://sakuratan.biz/archives/2131/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
