はてなブログでjQueryを学ぼう7 外部ライブラリーを作成できるのか?
- 前回のまとめ
- 1度作ったプログラムは使いまわしたい
- ajaxでhtmlを読み込んでみた
- それならiframeタグで丸ごと表示してしまえ
- それならブログの1ページを外部ライブラリーとして利用してみます
- まとめ
前回のまとめ
前回Xデーカウンターの基礎を実験しました。
まとめると下記のコードで動きます。
<p id="motegiday">日本グランプリ開幕まで・・・日</p>
$(function() {
$(window).ready(function(){
var vxdt = new Date('2015/10/09'); // ←Xデー
var vsdt = new Date(); // ←ここに当日をセット
var vsec = vxdt.getTime()-vsdt.getTime();
var vday = Math.floor( vsec / (1000*60*60*24) );
$('#motegiday').text('日本グランプリ開幕まであと' + vday + ' 日');
});
});
1度作ったプログラムは使いまわしたい
毎回毎回上記コードをコピペすれば目的は達成できます。でも、面倒。
しかもプログラムに修正が入った時、使った場所分だけ修正が必要。
そんなことしたくない。たぶんしない。
そんな訳で、プログラムの共通化(外部ライブラリー化)できるか検証。
ajaxでhtmlを読み込んでみた
$.ajax({
url: "http://motagp.hatenablog.com/entry/test-data01",
dataType: "html",
success:function( data ) {
$("#xdays").html($('#motegiday', data).html());
},
error: function(){
$('#xdays').text('読み込みエラー');
}
});
});
ここに表示
-----------------------------------
カウントダウン日付が・・・のままです。
参照先で動くプログラムは動作しないようです。
それならiframeタグで丸ごと表示してしまえ
外部ページをインラインフレームで表示する機能を試します。
<iframe src="http://motagp.hatenablog.com/entry/test-data01" width="400" height="100">
ここにiframeで表示
結果は何も表示されない。
Refused to display 'http://motagp.hatenablog.com/entry/test-data01' in a frame because it set 'X-Frame-Options' to 'DENY'.
エラーでました、ifreme参照は禁止してます表示。
流石はてなブログ、当たり前か。
それならブログの1ページを外部ライブラリーとして利用してみます
ブログ1ページに下記コードを記載、参照できるか試します。
http://motagp.hatenablog.com/entry/js
<p>
<script type="text/javascript">// <![CDATA[
function naninani() {
alert('motamota');
}
// ]]></script>
</p>
このブログでは下記を追加して、動いたらアラートが表示されます。
$(window).load(function(){
msgtest();
});
結果は何も起きませんでした。
エラーは下記、参照したライブラリーのMIME形式が違うって怒られてます。
Refused to execute script from 'http://motagp.hatenablog.com/entry/js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Uncaught ReferenceError: msgtest is not defined
ライブラリーの script type="text/javascript" ってheadタグに記載しなさいってルールあるらしく、今のままだとjavascriptファイルと認識してくれません。
headファイルっていじれないよね。
まとめ
私の今の技術力では、外部ファイル化は実現できませんでした。
何かいい方法ないですかね~
寂しく終わり