どうもこんばんは！HYPのこうじです。

Yahooショッピング出店し、ページを作成する際に有料で使用出来る『Yahooトリプル』というFTPサーバーがあります。
このFTPサーバーですが、通常のFTPと違ってちょっとクセモノです。

すぐに反映されない

反映がめちゃくちゃ遅いです。
『あ、テキスト間違ってた。てへぺろ！』なんてことがあろうものなら、一文字直すだけでも反映まで長いと20分とか平気で掛かります。
サーバー上で検証しながらページ作成なんてもってのほかです！

元々、Yahooショッピングの出店料が有料だった時代に、FTPサーバーへファイルアップ時に、外部リンクや不正なスクリプト等をアップされないように未然にチェックしてからサーバーに反映されるという仕組みになっていたのですが、その名残の様です。

<base />のtargetが反映されない

モール型出店者には欠かせないインラインフレームですが、その際に良く使われる<a />タグのターゲット属性。
これが無いとインラインフレーム内で開いちゃいますからね。
各<a />タグ一つ一つに属性を設定するのは問題ないのですが、<base />タグを利用したターゲット設定はなぜか機能しません。

[html]
<!– OK –>
<a href="#" target="_top" rel="noopener noreferrer">機能する</a>

<!– NG –>
<!– <a />にターゲットは適用されない。 –>
<base target="_top">
[/html]

非常に面倒な上、管理上も面倒です。

今回はこのターゲット属性をスクリプトでやっちまおうぜって話です。
なんてことないですね！

<a />に自動でtargetを設定しよう！

基本的には全てのaタグに対してターゲット付与を繰り返すだけですが、ターゲット値が既に設定されているかどうかを確認する処理を挟む事で、任意にターゲットを変更したい場合にも対応できる柔軟性を持たせました。

Vanilla JS

[js]
// 設定するターゲット値。
var target = '_top';

// 全てのaタグを取得。
var a = document.getElementsByTagName('a');

// 全てのaタグにターゲットを振る。
for (var i = 0; i < a.length; i++)

    // aタグにターゲットが設定されていない場合のみ設定する。
    if (!a[i].target) a[i].target = target;
[/js]

jQuery

[js]
// 設定するターゲット値。
var target = '_top';

// 全てのaタグにターゲットを振る。
$('a').each(function()
{
    if (!$(this).attr('target')) $(this).attr('target', target);
});
[/js]

あとはこれを外部ファイルにして貼っつけてもいいですし、そんなにファイル数が無いなら</body>直前に貼っつけてもいいと思います。
そんな長いスクリプトでもないですしね。

簡潔さを求めるのであればもっと短くも出来ます。
最後の方にある『_top』を任意に変更して設定値を変えられます。

Vanilla JS

[js]
(function(a, t) { for (var i = 0; i < a.length; i++) if (!a[i].target) a[i].target = t; })(document.getElementsByTagName('a'), '_top');
[/js]

jQuery

[js]
$('a').each(function() { if (!$(this).attr('target')) $(this).attr('target', '_top'); });
[/js]

これで、インラインフレーム内のリンク先を全て一意の値に設定出来ます！