Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] wczytywanie zewnętrznego js w js
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
pionas
19.08.2013, 17:03:45
Cześć,

na stronie chcę zrobić zdarzenie onClick, który uruchomi funkcję js wczytującą zewnętrzny plik js i uruchomi jej funkcję.
Niestety mam problem.
Kod wygląda tak:

index.html:
Kod
<script type="text/javascript">
function contact(form) {
    var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = './js/contact.js';
    var s = document.getElementsByTagName('div')[0];
        s.parentNode.insertBefore(ga, s);
}
</script>
<a href="http://moja_strona.pl/kontakt.html" onclick="contact('form');return false;">Skontaktuj się z nami</a>


contact.js:
Kod
function cos {
document.write('<div id="dial" class="okno" style="position:absolute;top:0;left:0;width:500px;height:200px;">formularz...</div>');
}


próbowałem dać w contact.js:
window.onload = cos;
ale nie działa...
W ogóle jest możliwość wczytania js do div?
b4rt3kk
19.08.2013, 19:04:51
Jaki to ma sens i cel? Nie prościej jest ów div od początku dołączyć do treści strony, tyle że go ukryć i wyświetlić dopiero w momencie kliknięcia?
sowiq
19.08.2013, 19:24:53
Kolego, zabierasz się do tego, kolokwialnie mówiąc - od dupy strony.

Zacznijmy od tego, że chcesz wczytywać dodatkowy plik JS tylko po to, żeby wyświetlić jeden element <div />. Takie podejście miałoby sens, gdyby ów plik JS ważył kilkadziesiąt/set KB i nie chciałbyś go ładować za każdym razem, a tylko wtedy, kiedy będzie potrzebny.
Tutaj zdecydowanie wystarczyłoby wywołać kod dodający element bezpośrednio z Twojej funkcji function contact(form).

Co do window.onload = cos; - zadziała to tylko wtedy, kiedy funkcja cos będzie zdefiniowana w momencie wywołania zdarzenia "onload" obiektu "window".

Reasumując przydługiego posta. Zacznij od podstawowych rzeczy, które trochę ułatwią Ci pracę:
jQuery
jQuery.load()
opis metody jQuery.load

Ewentualnie zrób tak, jak napisał @b4rt3kk. Jak dla mnie to w takiej prostej sytuacji najbardziej rozsądne rozwiązanie. jQuery.toggle(), jQuery.hide(), jQuery.show()
pionas
19.08.2013, 19:28:33
to jest aby początek kodu, ogólnie chodzi mi o wczytanie zewnętrznego js i wywołanie z niego jakiś funkcji...
sowiq
20.08.2013, 08:03:20
W takim razie wywołanie funkcji z pliku, który jest wczytywany, powinieneś wywołać w momencie załadowania tego pliku. W innym przypadku nie będzie ona zdefiniowana.

[JAVASCRIPT] pobierz, plaintext 
  1. ...
  2. s.parentNode.insertBefore(ga, s);
  3.  
  4. ga.onload = cos;
  5.  
  6. // ewentualnie:
  7. ga.onload = function(){
  8.     funkcja_z_pliku_1();
  9.     funkcja_z_pliku_2();
  10.     cokolwiek_innego();
  11. };
[JAVASCRIPT] pobierz, plaintext
pionas
20.08.2013, 08:25:48
w contact.js dałem:
Kod
function cos() {
alert("dziala");
}


w pliku głównym bez względu czy dam:
Kod
ga.onload = function(){
        cos();
}

czy
Kod
ga.onload = cos;

nie działa
sowiq
20.08.2013, 09:06:53
Może nie wczytuje Ci pliku? Zajrzyj w Firebugu do zakładki Net. Powinno Ci pokazać czy plik się wczytał, czy np. masz błąd 404. Sprawdź, czy na pewno na stronie masz jakiś element <div />, do którego doklejasz skrypt. A najlepiej to dodawaj go do <head />, a nie <div />.

Jednym słowem - debuguj wink.gif
pionas
20.08.2013, 16:30:42
[EDIT]
dałem taki kod:
Kod
<script type="text/javascript">
function contact(form) {
    var ga = document.createElement('script');
        ga.setAttribute('type', 'text/javascript');
        ga.setAttribute('src', './js/contact.js');
        ga.setAttribute('async', true);
    var s = document.getElementsByTagName('div')[0];
        s.parentNode.insertBefore(ga, s);
}
</script>
<body onload="contact('form')">
<div>
<a href="http://moja_strona.pl/kontakt.html" onclick="cos();return false;">Skontaktuj się z nami</a>
</div>


i działa.
sowiq
20.08.2013, 17:20:34
To równie dobrze możesz zrobić tak jak poniżej, ale co ja tam wiem...

[HTML] pobierz, plaintext 
  1. <body>
  2.     <script type="text/javascript" src="js/contact.js"></script>
  3.     <div>
  4.         <a href="http://moja_strona.pl/kontakt.html" onclick="cos();return false;">Skontaktuj się z nami</a>
  5.     </div>
  6. </body>
[HTML] pobierz, plaintext
pionas
20.08.2013, 17:38:00
to prawda mogę zrobić i tak i myślę że w taki sposób nie miałbym kolejnego problemu z contact.js:
Kod
function cos(website) {
var div = document.createElement('div');
div.innerHTML = "<a href='#' onclick=\"close();return alert('aaa');\" style=\"float:right\">zamknij</a><br />lalalala";
div.setAttribute('id', 'contact');
document.body.appendChild(div);
}

function close() {
document.getElementById("contact").style.display='none';
}

czemu nie działa funkcja close?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.