Skrypt, który wstawi kilka linków na stronę.

0

Witam i proszę o pomoc.
Potrzebuję zrobić skrypt, który będzie wstawiał odnośniki do kilku stron na obecną stronę WWW. Po kliknięciu na link strona musi otwierać się w tym samym oknie. Zależy mi na tym aby odnośniki do stron i nazwy odnośników były podane w samym skrypcie, a cały skrypy mógłbym zapisać w pliku zewnętrznym np., odnosniki.js. Potem w razie zmiany linków, zmieniałbym dane w skrypcie a nie w html.
Udało mi się zrobić coś zbliżonego do celu i wygląda to tak:


<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">


<SCRIPT language="JavaScript">
function openwindow1()
{
window.open("https://www.strona1.pl", '_self');
}
function openwindow2()
{
window.open("https://www.strona2.pl", '_self');
}
function openwindow3()
{
window.open("https://www.strona3.pl", '_self');
}
function openwindow4()
{
window.open("https://www.strona4.pl", '_self');
}
function openwindow5()
{
window.open("https://www.strona5.pl", '_self');
}
</SCRIPT>


</head>

<body>


<a href="javascript:openwindow1()">Link do strony1</a><br>
<a href="javascript:openwindow2()">Link do strony2</a><br>
<a href="javascript:openwindow3()">Link do strony3</a><br>
<a href="javascript:openwindow4()">Link do strony4</a><br>
<a href="javascript:openwindow5()">Link do strony5</a><br>


</body>

</html>
1

a cały skrypy mógłbym zapisać w pliku zewnętrznym np., odnosniki.js. Potem w razie zmiany linków, zmieniałbym dane w skrypcie a nie w html.

https://www.w3schools.com/tags/att_script_src.asp

ps: nie musisz tworzyć nowej funkcji dla każdego linka. jak już tak bardzo chcesz mieć te funkcję, to zrób jedną, która przyjmuje linka jako parametr.

https://developer.mozilla.org/pl/docs/Web/JavaScript/Guide/Funkcje

https://www.w3schools.com/js/js_function_parameters.asp

0

Wiem, że trzeba wskazać plik js, jeśli jest to plik zewnętrzny.
Nie umiem programować w JavaScript. Siedziałem nad tym kilka dni i tylko to udało mi się sklecić. Obawiam się, że sam nie dam rady stworzyć złożonej funkcji. Bardzo proszę o pomoc.

3

Nie jest to może najpiękniej napisane, ale starałem się to zrobić w sposób maksymalnie prosty, żebyś rozumiał jak to działa. Wiem, że kilka rzeczy powinno się zrobić inaczej, np. skorzystać z addEventListener zamiast onload="wstawLinki()", ale po poziomie Twojego pytania i tego, co napisałeś widać, że jesteś totalnie początkujący, więc nie ma co na start przywalać Cię jakąś kosmiczną ilością wiadomości ;)

Poniżej masz dwa pliki - HTML oraz JS. Po prost skopiuj treść ramek i wklej do tych plików u siebie na kompie. Są tylko dwie rzeczy, o których musisz pamiętać:
1) oba pliki muszą być w tym samym folderze
oraz
2) plik ze skryptem musi się nazywać skrypt.js. Plik HTML może się nazywać dowolnie, nie ma to tutaj znaczenia.

<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  <script language="JavaScript" src="skrypt.js"></script>
</head>
<body onload="wstawLinki()">
  <div id="tutaj_daj_linki">
  </div>
</body>
</html>

const noweStrony= [
  ["http://www.wp.pl", "Wirtualna Polska"],
  ["http://onet.pl", "ONECIK jest cool"],
  ["http://4programmers.net", "jakas przypadkowa strona dla nerdow"],
  ["http://www.sex.com", "cos do obejrzenia po godzinach"],
  ["http://drakonica.pl", "Przemyslenia wielkiego zielonego smoka/smoczycy"],
];

function dopiszLink(link, opis) {
  var nowyLink= document.createElement("a");
  var nazwaLinku= document.createTextNode(opis);
  nowyLink.appendChild(nazwaLinku);
  nowyLink.title= opis;
  nowyLink.href= "javascript:otworzNoweOkno('"+link+"')";
  document.getElementById("tutaj_daj_linki").appendChild(nowyLink);
  var nowyOdstep= document.createElement("br");
  document.getElementById("tutaj_daj_linki").appendChild(nowyOdstep);
}

function wstawLinki() {
  for (ster= 0; ster < noweStrony.length; ster++) {
    dopiszLink(noweStrony[ster][0], noweStrony[ster][1]);
  }; 
}

function otworzNoweOkno(adresOkna){
  window.open(adresOkna, '_self');
}

Daj proszę znać, czy rozumiesz, jak to działa. Jeśli czegoś nie czaisz to chętnie wyjaśnię (ale z drugiej strony nie chciało mi się pisać referatu na dwa ekrany, żeby potem nikt tego nie przeczytał ;)

1

Stwórz tablicę obiektów, w której każdy obiekt będzie posiadał dwie właściwości, link i nazwę.
np:

const link = [
	{link:"link1",name:"pierwszy link"},
	{link:"link2",name:"kolejny link"},
	{link:"link2",name:"kolejny link2"},
	{link:"link3",name:"ostatni link"}
];

potem za pomocą pętli przeleć po każdym obiekcie i stwórz z niego link i dodaj do dokumentu

0

Witajcie.
Dziękuję za odpowiedzi. Moje wyrazy uznania dla Ciebie cerrato za poświęcenie i szczegółowe wskazówki. Twoje rozwiązanie działa, a ja nie spotkałem takiego nigdzie indziej. Podejrzewam, że wiele osób skorzysta z Twojego pomysłu. Jedynym małym mankamentem jest to, że nie są wyświetlane wszystkie polskie znaki – ą,ś,ź.
screenshot-20190311015118.png
Przypuszczam, że można to w jakiś sposób dodać do skryptu, aby te znaki były prawidłowo wyświetlane. Jeszcze raz bardzo dziękuję za pomoc. Pozdrawiam.

0

Podejrzewam, że to kwestia kodowania.
Po pierwsze - ustal na poziomie HTML, wpisz w <HEAD> coś w stylu <meta charset="utf-8">.
A po drugie - upewnij się, że edytor, w którym piszesz sobie radzi z obsługą odpowiedniego kodowania (dlatego np. nie używaj Windowsowego notatnika, ale czegoś lepszego). I w tym edytorze ustaw także stosowne kodowanie - pasujące do tego, które masz zadeklarowane w HTML.

Jeśli nie będzie działać to wrzuć tutaj cały skrypt oraz HTML, pokombinujemy :)
Pamiętaj też, że uwaga odnośnie ustawienia kodowania w edytorze dotyczy zarówno pliku HTML, jak i wczytywanego przez niego pliku JS.

1 użytkowników online, w tym zalogowanych: 0, gości: 1