質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

JavascriptかJQueryを使ってCache Bustingする方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,130

lingwood

score 40

 前提・実現したいこと

JavascriptかJQueryを使い日付やバージョンを自動的に生成して、
CSSやJSにクエリ付加するCache Bustingnigをしたいのですが、
うまくできません。

WordPressサイトではなく、また、phpが使える環境ではないため
その方法を模索しています。
いろいろなサイトを参考にしたのですが、
何度やっても
<link rel="stylesheet" type="text/css" href="/css/style.css?ver=20181017143123">
こんな感じに文章が出現しないため途方に暮れています。

以下、参考にしたコードです。

また、QiitaさんのASP版と言われているものなどはどう使ったら良いのでしょうか?

JavascriptとHTMLがちょっと分かる程度なので、
ズバリで教えていただけるとすごく助かります。

 該当のソースコード

<script>
var today = new Date()
var year = today.getFullYear()
var month= today.getMonth() + 1
var date = today.getDate()
if (month < 10) {
month = "0" + month
}
if (date < 10) {
date = "0" + date
}
var versioningNum = "" + year + month + date
var jsURL = 'js/custom.js?ver=' + versioningNum
var jsElement=document.createElement('script')
jsElement.setAttribute('src', jsURL)
document.getElementsByTagName("body")[0].appendChild(jsElement)
</script>
<script>
var versioningNum = new Date().getTime()
var jsURL = '../../portfolio/js/custom.js?ver=' + versioningNum
var jsElement=document.createElement('script')
jsElement.setAttribute('src', jsURL)
document.getElementsByTagName("body")[0].appendChild(jsElement)
</script>

↓↓↓Qiitaさんのサイトから拝借したコード

Function filedate(filename)
    Dim fso,file,dtm

    Set fso = CreateObject("Scripting.FileSystemObject")
    Set file = fso.GetFile(Server.MapPath(filename))
    dtm = file.DateLastModified
    Set fso = Nothing
    Set file = Nothing

    'yyyy/mm/dd hh:mm:ss を yyyymmddhhmmss に変換
    filedate = filename & "?date=" & Replace(Replace(Replace(dtm, "/", ""), ":", ""), " ", "")

End Function

よろしくお願いします。

 追記

テストファイルを作成して動作を確認しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width; initial-scale=1.0">

<!-- css  -->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">



<!-- script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
<script type="text/javascript" src="./js/scroll.js"></script>
<script type="text/javascript" src="./js/scrollTgBlank.js"></script>
<script type="text/javascript" src="./js/common.js"></script>

<script>
var versioningNum = new Date().getTime()
var jsURL = './js/common.js?ver=' + versioningNum
var jsElement=document.createElement('script')
jsElement.setAttribute('src', jsURL)
document.getElementsByTagName("body")[0].appendChild(jsElement)
</script>

</head>
<body id="top">
<!-- =========================================================== -->
<!-- =========================================================== --><div style="margin-bottom:150px;"></div>
<!-- =========================================================== --><div style="margin-bottom:250px;"></div>

<a href="#top" class="pagetop">PAGETOP</a>
</body>
</html>


出力がないです。
イメージ

![イメージコンソールエラーはありませんでした。](5612af0c1c687144c6074d997dacdb5b.png)](eb4dd3ee5290b3d2b34cfd027a1b1833.png)

 追記②

失礼いたしました。コンソールエラーはありました。
ソースコードを表示したページのコンソールを確認してしまっていました。
イメージ説明

 追記③

失礼いたしました。
出ているようでした・・・
x_x様 ありがとうございます!
イメージ説明

 Javascriptを使って他に上手く出力させる方法などはないのでしょうか?

例えばですが、phpのように日付を格納した変数を置くといった方法です。
<link rel="stylesheet" type="text/css" href="css/style.css?v=変数">
<script type="text/javascript" src="./js/common.js?v=変数"></script>

また、もしあればですが何か他に良い方法があったら教えていただけませんでしょうか?

宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2018/10/17 18:38

    Elements も確認してもらえるでしょうか?

    キャンセル

  • lingwood

    2018/10/17 18:46

    x_x 様 ありがとうございます。Elementsを確認したところ、出力されていました。何度も手間をおかけしてすみません。ソースコード上に出ると思っていたので・・・もう少し簡単にする方法(例えばcssやjsファイルの指定する際に?ver=変数)もしくは、もっと良い方法とかはないのでしょうか?

    キャンセル

  • lingwood

    2018/10/17 20:34

    x_x  様 ありがとうございました。本当に助かりました。いろいろと試行までしていただき大変感謝いつも大変感謝しております。またの際にも宜しくお願い致します。

    キャンセル

回答 1

checkベストアンサー

0

<script>~</script> を、</body>直前に移動してください。
body出現前にbodyを参照しているためエラーになります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/17 18:23

    とはいえ、手元の環境ではmetaのエラーと「Uncaught TypeError: Cannot read property 'appendChild' of undefined」が出ているのでまったく何も出ない理由はわからないですね

    キャンセル

  • 2018/10/17 18:36

    x_x 様
    ありがとうございます。コンソールエラーの件は、ちゃんと出ていたようです。大変失礼いたしました。
    Ctrl+Uでソースコードを表示したページをF12で検証したためです。
    また/body直前に移動してみたのですが、やはり出力はされていないためどうしたらいいのでしょうか・・・

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る