• Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt
Niebieski Pomarańczowy Zielony Różowy Fioletowy

Masowe otwieranie linków

Opublikowane 21 lutego 2010. Autor: Kamil Brenk. Wizyt: 8 297.

Kategorie: JavaScript
Tematyka: JavaScript, praktyczne skrypty, Wyrażenia regularne

lut 21

Napisałem sobie dawno temu prosty skrypt JavaScript, którego zadaniem jest otwieranie wprowadzonych linków w nowym oknie/karcie.

Jakie tego przeznaczenie? Otóż często zachodzi potrzeba otwarcia dużej ilości linków, np. odnośników do filmu lub serialu. Żmudne jest więc kopiowanie każdego linku po kolei – dużo łatwiej byłoby po prostu wkleić adresy w pole tekstowe i kliknięcie jednego przycisku :-)

Piszemy skrypt

Skrypt był napisany dość dawno temu. Nie używano wtedy tak powszechnie jQuery i innych wynalazków, a pisano po prostu w czystym JavaScript. Oto źródło skryptu z wewnętrznymi komentarzami (links.js):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/**
*
* Get links from textarea
*
* @param string text_id     form id with links
*
**/

function getLinks(text_id) {

    // prepare variables
    var links_field     = document.getElementById(text_id);
    var links_array     = links_field.value.split('\n');
   
    // open links in new window
    openLinks(links_array, links_field);

}


/**
*
* Open links in new windows
*
* @param array  links_array     links to open in new windows
* @param string links_field     form id to clear text (optional)
*
**/

function openLinks(links_array, links_field) {

    // prepare variable
    var links_correct   = [];
   
    // regex
    var _validUrl   = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
    var _lTrim      = /^\s+/g;
   
   
    // check links and remove incorrect links
    for (i = 0; i <= links_array.length-1; i++) {
   
        // clean whitespaces - a'la ltrim
        links_array[i] = links_array[i].replace(_lTrim, '');
       
        // check validate url
        if ( _validUrl.test(links_array[i]) ) {
            links_correct.push( links_array[i] );
        }
       
    }

   
    // total links
    var links_num = links_correct.length;
   
    // error: no links
    if (links_correct.length < 1) {
        alert('Proszę wpisać linki (każdy w osobnej linii).');
        return false;
    }
   
   
    // answer
    var answer = confirm("Poprawnych adresów URL: " + links_num + ".\nCzy na pewno chcesz otworzyć te linki w nowych kartach?");
    if (!answer) return false;
   
   
    // opens in new window
    for (i = 0; i <= links_num-1; i++) {
        window.open( links_correct[i] );
    }
   
   
    // clear all text
    if (links_field != 'null' || links_field !== '') {
        links_field.value = '';
    }
   
    // block other actions
    return false;

}

Myślę, że kod nie wymaga większego objaśnienia. Mamy dwie funkcje:

  1. openLinks – jako argument pobiera identyfikator pola tekstowego (textarea), z którego pobiera linki i przekazuje kolejnej funkcji do otwarcia,
  2. openLinks – właściwa funkcja dokonująca masowego otwierania linków w nowym oknie/karcie.
Co dalej z tym zrobić?

Ok, skoro już mamy kod JavaScript wykonujący wszystkie zadania, napiszmy na szybko kod HTML wykorzystujący tę funkcjonalność:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="links.js" charset="UTF-8"></script>

<p>Wpisz listę adresów WWW, które chcesz otworzyć w nowych kartach:</p>

<textarea id="url_list" cols="80" rows="20">
http://blog.kamilbrenk.pl/
http://testy-zawodowe.pl/
</textarea>

<input type="button" value="Otwórz wszystkie linki w nowych kartach"
                                onclick="return getLinks('url_list');">

I to wszystko. Mamy małego „ułatwiacza” dla leniwych :-)

Przykład skryptu
  • Masowe otwieranie linków – pokaż przykład

Komentarze (8)

  1. Michal Wachowski 26 lutego 2010

    Nie powiem, szczwane.

  2. Kamil Brenk 25 kwietnia 2010

    Dało radę by przerobić tak skrypt aby otwierało każdy kolejny link po jednej sekundzie ?

    Można przerobić, ale trzeba by z lekka zmienić strukturę funkcji. Nie jest to zbyt pięknie napisany kod – moim celem było szybkie napisanie funkcji ułatwiającej otwieranie linków w nowych zakładkach w tym samym czasie, na własne potrzeby. Przy okazji tutaj wrzuciłem :)

  3. Szary 21 stycznia 2013

    Właśnie tego szukałem ale działa tylko pod firefoxem w operze i google chrome otwiera tylko pierwszą zakładkę, pomimo tego chętnie postawię browca za ten skrypt.
    pozdro.

  4. Kamil Brenk 23 stycznia 2013

    @Szary: mi w Chrome działa, aczkolwiek coś może Ci blokować te kolejne okienka. Możesz dać opóźnienie dla otwieranych okien (setTimeout(openWindow, 1) dla każdego okienka) lub utworzyć X ukrytych elementów A i w każdego „kliknąć” z poziomu JS – być może to obejdzie przeglądarkowe zabezpieczenia.

  5. zpini 11 marca 2014

    Wielkie dzięki za skrypcik. Dokładnie tego szukałem ;)

  6. monia 24 maja 2017

    genialne! na chrome faktycznie blokuje ale na vivaldim hula :D Dzięki wieeelkie ułatwiłeś mi znacznie prace :*

  7. kabuto 18 lipca 2017

    Witam, jak zrobić aby otwierało strony bez http na poczatku, aby nie sprawdzał poprawności?
    onet.pl
    wp.pl
    itd.

  8. MichalR 6 października 2017

    Super sprawa… bardzo przydatne.. dzieki i pozdrawiam..



Kamil Brenk Blog

PHP, JavaScript, SQL, HTML

  • Informacje o blogu

    Kamil Brenk

    Blog o tworzeniu aplikacji na potrzeby sieci Web.

    Praktyczne przykłady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.

    Kanał RSS

    • Najnowsze
    • Komentarze
    • Popularne
    • Liczniki w CSS
    • Wyprzedaż książek o programowaniu!
    • Niestandardowy placeholder
    • JavaScript w modułach
    • Co dalej z blogiem?
    • Interaktywna mapa w HTML i CSS
    • Olsztyn: Jak wyseparować zawartość zassaną przez file_get_content?
    • ERMLAB: Od czegoś trzeba zacząć :) Wiele osób właśnie stawia na...
    • david: co nalezy wkleić na stronę aby plik ze stylami był ladowany...
    • krynicz: Nie jestem pewien czy dobrze to rozumiem: wpisujemy OG w...
    • yaro: Jak zmienić re_write znak "_" na "-"?
    • Piotr: stworzyłem prostą stronkę w PHP, czy jest możliwość aby...
    • MichalR: Super sprawa... bardzo przydatne.. dzieki i pozdrawiam..
    • Niestandardowe czcionki na stronie
    • Sposoby wczytywania JavaScript
    • Gramatyka w PHP, część 1
    • Umowa i zaliczka dla freelancera
    • Wysyłanie wiadomości SMS w PHP
    • Projekt aplikacji po stronie klienta
    • Własny mechanizm Feed
  • Szukajka
    Wpisz co chcesz wyszukać na stronie…
  • Kategorie
    • Apache
    • Freelancer
    • Front-end Development
    • HTML5 & CSS3
    • Inne
    • JavaScript
    • Książki
    • PHP
    • Po godzinach
    • Pozycjonowanie
    • Protokół HTTP
    • SQL
    • Wyrażenia regularne
  • Moje serwisy
    • Testy zawodowe
    • Miłość, uczucia i seks
  • Czytane blogi
    • Wojciech Sznapka
    • Wojciech Soczyński
    • Michał Wachowski
    • Tomasz Kowalczyk
    • Filip Górczyński
  • Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt

Kamil Brenk © 2010. All rights reserved.

Designed by FTL Wordpress Themes brought to you by Smashing Magazine.

Do góry ∧