サポート » 使い方全般 » 外部JavaScriptが動作しません

  • 解決済 blendy777

    (@blendy777)


    お世話になります。
    WordPressにおいて、自分で作成した外部JavaScriptファイルを読み込みたいと考えています。

    そこで、テーマの編集のfunction.phpに

    function cf7confirm_scripts() {
    wp_enqueue_script(‘cf7confirm-style’,get_template_directory_uri().’/js/contact-form7-confirm.js’,array( ‘jquery’ ));
    }
    add_action( ‘wp_enqueue_scripts’,’cf7confirm_scripts’);

    と記述しました。

    外部JavaScriptを表示させたいページのソースに

    <script type=’text/javascript’ src=’http://●●●●/js/contact-form7-confirm.js?ver=4.1.1&#8242; defer=’defer’></script>

    とあり、そのリンクから外部ファイルの中身を見てみると自分の記述したJavaScriptがきちんと表示されます。

    しかしながら、動作がしておらず、Firefoxのコンソールを開いて確認したところ、

    ReferenceError: 〇〇〇 is not defined

    と表示されており、うまく認識されていない模様です。
    ※WordPress以外での動作確認は取れています。

    上手く動作されない原因と解決方法をご教示頂ければと思います。
    よろしくお願い致します。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • モデレーター Okamoto Hidetaka

    (@hideokamoto)

    http://kachibito.net/web-design/wordpress-with-jquery.html
    これの「コンフリクトを回避する」を実施されてみてはいかがでしょうか?

    トピック投稿者 blendy777

    (@blendy777)

    hideokamoto 様

    ご教示ありがとうございます。

    教えていただいたサイトを見てみたのですが、私の作成したJavaScriptには$を使用しておりません・・。

    テストする為に

    function koshin(){
    var hiduke=document.lastModified;
    document.write(hiduke);
    }

    と記述したファイルも
    ReferenceError: koshin is not defined
    と出ています。

    私の認識違いでしょうか?

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

    ReferenceError: koshin is not defined

    「koshin」が定義されていないということみたいですね。

    以下の記事のコードなどで、関数が定義されているか否かを確認して頂けますでしょうか?

    http://d.hatena.ne.jp/kasei_san/20101102/p1

    トピック投稿者 blendy777

    (@blendy777)

    hideokamoto 様

    たびたびありがとうございます。
    consol.logを試したところ、同じJavaScriptファイルを読み込ませたとしても、WordPressを利用して表示させようとした方でのみ、

    ReferenceError

    があらわれます。

    もっとシンプルに、

    function blendy(){
    document.write(‘blendy’);
    }

    というJavaScriptを使用しても、WordPressを利用して表示させようとした場合のみ

    ReferenceError: blendy is not defined

    と出て「blendylと表示されません。

    ファイルの依存関係が分からないので
    的外れな回答だったらごめんなさい。

    function blendy(){
    document.write(‘blendy’);
    }

    は単に関数の定義部分ですよね。

    ReferenceError: blendy is not defined

    は、関数の実行部で発生しているはずです。

    関数「blendy」を定義する前に、blendyを呼び出していませんか?

    もし、制作したjavascriptに依存ファイルがあるなら
    読み込みの順番を確認してみてはいかがでしょうか?

    トピック投稿者 blendy777

    (@blendy777)

    TomoeIntl 様

    ご教示ありがとうございます。そしてお伝えしている情報が少なくて申し訳ありません。

    function blendy(){
    document.write(‘blendy’);
    }

    を記述しているJavaScriptの外部ファイルの読み込みの記述はfunction.phpで行っており、ソースで確認するとheaderに表示されている4つのJavaScriptの1番下に表示されています。

    そして

    <script>
    blendy();
    </script>

    は、bodyに記述しているのですが、ソースのtitleタグの真下に

    <meta name=”description” content=”[contact-form-7 id=”610″ title=”hogehoge”] koshin(); blendy(); ” />

    というのが表示されています。

    これが原因でしょうか?

    なるほど。

    まず
    defer付のスクリプトはDOM構築をブロックしません。
    そのためdefer付スクリプトでは、インラインスクリプトを使用できません。

    <script>
    blendy();
    </script>

    はNGということです。

    これが原因では?

    もうひとつ

    defer付のスクリプト内では
    document.write('blendy')
    もNGです。

    トピック投稿者 blendy777

    (@blendy777)

    TomoeIntl 様

    ありがとうございます。
    テーマの中にdeferを付ける記述があったようです。

    それを無くす方法と、無くして問題がないかを調べてみます。

    蛇足ですが

    個人的には
    deferを削除するのではなく
    インラインスクリプトを使用しないほうが
    良いと思います。

    そのほうがDOM構築の効率が良いかと。

    トピック投稿者 blendy777

    (@blendy777)

    TomoeIntl 様
    hideokamoto 様

    さきほど無事解決いたしました。大変ありがとうございました。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「外部JavaScriptが動作しません」には新たに返信することはできません。