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

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

ただいまの
回答率

89.97%

javascriptから外部のjavascript呼び出し

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,512

hide09090909

score 59

前提・実現したいこと

HTMLに埋め込んだアイコンをタップするとイベントとして、外部jsに埋め込んだアラートが表示されるということを行いたいです。

発生している問題・エラーメッセージ

アイコンをタッチするとjsのコードがそのまま表示されてしまいます(buildされていない?)

該当のソースコード

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title> LIVE </title>

  <script>
  function imgClick() {

    //指定したURLやファイルに遷移させる。
    //window.location.href="js/index.js";

  }
  </script>

  <body>
    <a href="javascript:void(0)" onclick="imgClick();">
    <img src="img/Icon.png" width="100" height="100" ; /></a>
    <script type="text/javascript" src="js/index.js"></script>

  </body>
</head>
</html>
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
 alert("a");
var app = {

    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        //app.receivedEvent('deviceready');


  },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

試したこと

課題に対してアプローチしたことを記載してください

補足情報(言語/FW/ツール等のバージョンなど)

より詳細な情報

どなたか外部JavaScriptの呼び出し方がわかる方教えていただけると幸いです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

+3

window.location.href="js/index.js";

これはjs/index.jsに飛ぶのですからそのまま表示されますね

ご自身でかかれてる

<script type="text/javascript" src="js/index.js"></script>


がまさに、外部ファイルを読み込んで実行しているかしょですが
これではだめなのでしょうか?
だめな場合なにをしたいのでしょうか?

 sample

<script>
function imgClick() {
  var s=document.createElement("script");
  s.setAttribute("src","js/index.js");
  document.getElementsByTagName("head")[0].appendChild(s);
  return false;
}
</script>
<a href="#" onclick="return imgClick()"><img alt="test"></a>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/11/18 09:14 編集

    ご回答ありがとうございます。
    質問が言葉足らずでした。
    アイコンをタップした際のイベントとして、外部JSを呼び出したいです。
    <script type="text/javascript" src="js/index.js"></script>のみだと外部JSを呼び出すタイミングを指定できないというところが困っています。

    キャンセル

  • 2016/11/18 09:37

    そもそも外部スクリプトにfunction化もしていないscriptを
    ベタに書いている方がいけないと思います
    普通は先行してライブラリを読んで、必要に応じて関数を実行します

    どうしてもimgClick時に読んできて実行する必要があるなら
    ちょっとむちゃがありますがsampleを上げておきます

    キャンセル

checkベストアンサー

+2

function化して、呼び出すだけです。

##index.js
function indexJsFunction() {
    alert('this is index.js');
}
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
indexJsFunction();
</script>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+2

作成例。参考になるかどうかわかりませんが。

<!DOCTYPE html>
<html>
<head>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript">
    function objectCopyFunction(){
      var s = obj;
      s.doEvent();
    }
    function constructorFunction(){
      var player = new Player();
      player.sayHello();
    }
    </script>
    <title>sample</title>
  </head>
</head>
<body>
  <div>
    <a href="javacript:void(0)" onclick="directFunction()">外部jsファイル、関数直接呼出し</a>
  </div>
  <div>
    <a href="javascript:void(0)" onclick="objectCopyFunction()">外部jsファイルから、オブジェクトへの参照呼出し</a>
  </div>
  <div>
    <a href="javascript:void(0)" onclick="constructorFunction()">外部jsファイルからオブジェクト指向でコンストラクタ呼出し</a>
  </div>
</body>
</html>
//純粋な関数
function directFunction(){
  alert("hai,chokusetsu yobidasare mashita");
}

// オブジェクトで関数を定義
var obj={
  message:"object de teigi sarete imasu!!!!",
  doEvent:function(){
    alert(this.message);
  }
}

//関数というよりはOOPのコンストラクタ
function Player(){
  this.message="Made in Constructor";
  this.sayHello=function(){
      alert(this.message);
  };
};

今回の質問とは関係ありませんが・・・
body タグを、 headタグの中に入れちゃってますね。子要素になってますが、これで合っていますか?私はおかしいと思います。タグが定義通りに記述されていなかったら動作はどうなるか保証できません。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/11/18 09:37

    ご回答と例文ありがとうございます。
    質問が言葉足らずですみません。
    HTML側でボタンが押された際にJSで記述したアラートを表示したいと考えております。
    私の質問文でいうとHTMLの function imgClick()の中に書くものを理解できておりません。
    もし、わかりましたら教えていただけると幸いです。

    キャンセル

0

外部jsファイルに

function hyoji(){
alert("test");
}


のように記述して、head内で<script type="text/javascript" src="ScriptファイルのURL"></script>を使って読み込んでalertを出したいときにhyoji();を実行するのがもっともポピュラーなやり方でkunaiさんの回答と同じですが、もし本当にその場で読み込みたければ

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","読み込むJavaScriptのURL",true);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status==200){
var data = xmlhttp.responseText;
eval(data);
}
}


のように書けばその場で読み込むことができます。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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