jsファイルの読み込みでjQueryのCDNも読み込む

jQuery・js・PHP

2018.11.26

楽天やヤフーでのひと気システム（にぎわい演出システム＆自動更新）。売り上げやランキング、レビューなんかを自動更新するシステムなんですが一度提供元にHTMLファイルを提出するとFTPで送られてくるHTMLは修正できません。（修正には追加料金が・・・）

そこで後々修正がし易い様に「CSSファイル」「JSファイル」は極力HTMLの外に置きます。

今回はリンクの一部に「_top」を入れ忘れてしまいました！HTMLをいじらずに修正しなければなりません。

スタイルシートではtarget指定が出来ないのでjQueryで調べると

$(function(){
$('a').attr({'target':'_blank'}); //全てのリンクを別タブにする場合
$('#sample a').attr({'target':'_blank'}); //特定要素内の全リンクを別タブにする場合
});

$(function(){

$('a').attr({'target':'_blank'}); //全てのリンクを別タブにする場合

$('#sample a').attr({'target':'_blank'}); //特定要素内の全リンクを別タブにする場合

});

というのを発見。

これはYahoo!ショッピングのトリプルで「<base target=”_top”>」が効かない場合に利用する

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script>
$(function(){
$('a').attr({'target':'_top'});
});
</script>

$(function(){

$('a').attr({'target':'_top'});

});

</script>

と同じ手法。

今回はスライダーにjQueryを使っていなかったのでJavaScriptのファイル内でjQueryのCDNの読み込みも必要。

var head = document.getElementsByTagName("head");
var script = document.createElement("script");

script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");
script.setAttribute("type", "text/javascript");
script.addEventListener("load", function() {
 
// jQuery
$(function(){
$('a').attr({'target':'_top'}); 
});
// end jQuery

});
document.head.appendChild(script);

var head = document.getElementsByTagName("head");

var script = document.createElement("script");

script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");

script.setAttribute("type", "text/javascript");

script.addEventListener("load", function() {

// jQuery

$(function(){

$('a').attr({'target':'_top'});

});

// end jQuery

});

document.head.appendChild(script);

jQueryをCDNで読み込んでターゲットを指定。

HTMLの書き換えを依頼しないで済みました。でもjQueryを使わずにJavaScriptだけで書ければ本当はいいんだけど・・・・・わからない？？？