Ako skryť prvky v HTML? Skrytý text na javascript skrytý JavaScript kód zobrazenia na stránke.

Popis: Existujú situácie, keď nechcete vybrať celý obsah stránky naraz. Napríklad v časti " FAQ."Odobrať len mená otázok. A ak sa osoba zaujíma o odpoveď na určitú otázku, môže otvoriť odpoveď, a keď sleduje, potom blízko. To vytvára pohodlie stránky a jeho kompaktnosť. A Pre toto som pripravený jednoduchý skript na Javascript.umožňuje otvoriť alebo skryť konkrétny text (všeobecne, určité prvky), to znamená skrytý text na javascript.

Výsledok: Kliknite na názov otázky. Ak kliknete znova, odpoveď sa opäť drží.

Otázka 1.

Odpoveď číslo 1.

Otázka # 2.

Odpoveď číslo 2.

Kód JavaScriptu (vložka medzi tagmi a):

HTML kód (vložka medzi tagmi a):

Otázka 1.



Otázka # 2.


Úprimne, nie je potrebné, aby žiadny vývojár, väčšinou ľubovoľný kód JavaScript ľahko pozerať do prehliadača, a preto neexistujú žiadne osobitné dôvody na skrytie vášho kódu. To, tak hovoriť, viditeľné, čo nemôže byť skryté. Avšak, tam sú chlapci, ktorí sú veľmi plachí, aby ukázali svoj kódex pre každého, vzhľadom na to, že táto vlastnosť nemôže kradnúť, hovorí knižnice. Vytvorili ste online službu, konkrétne vytvorili silnú komplexnú knižnicu, ktorá vykonáva určité operácie, žiadne analógy vašej služby, nie je žiadna vaša knižnica, a samozrejme by ste nechceli, aby váš skript videl každý (vývojár) a mohol by robiť na vašom Príklad podobné, ešte lepšie. Samozrejme, nie je nič zlého na tom, čo robí niečo lepšie, je to evolúcia, ale z hľadiska podnikania sú konkurenti len po ruke.

Čo je potrebné na to?

Potrebujete len pochopiť algoritmus a pokúsiť sa to zlepšiť, a odtezvam svoje skúsenosti, keď som skryl skripty. Prvá vec, ktorú potrebujeme, je otestovať úlohu na skutočnom (miestnom) serveri, urobím to s Denwerom lokálny server.

ale)Na testovanie vytvorte adresár na serveri.
Chodím virtuálny disk, Mám túto jednotku r, choďte tam ísť do domáceho priečinka

Vytvorte adresár skriptov a vo vnútri vytvoriť www zložku, ako výsledok, budete úspešní: Domov / Script / www / - potom, aby ste si aktualizovali server (reštart Denwer)

b) Vytvorte si súbor index.php - Napríklad, toto je naša hlavná stránka. A tu potrebujeme odstrániť skryté skripty. V tomto adresári tiež vytvorte priečinok "JS".

Pre našu úlohu sa vyžadujú požiadavky AJAX, pre to môžete použiť svoje racionálne funkcie, ale ak váš projekt bude rásť do veľkostí, ktoré budú vyžadovať použitie špeciálnych efektov, udalostí, pripojiť knižnicu a ja sa pripájam vopred jQuery, tak V koreňovom priečinku "JS» Pridať jquery.js.

Potom vytvorte v rovnakom priečinku nový priečinokSkripty, ktoré potrebujeme skryť, budú v ňom uložené. Budem to pomenovať "bezpečnosť":

v)Prijímame kódy náhľadu v index.php


Ako vidíte, je tu blok

PHP predpokladá úlohu čítania vašich skriptov, ktoré budú zablokované na serveri a nemožno ich použiť.

Ale najprv si vytvoríme naše skripty, ktoré chceme skryť.


d) V priečinku zabezpečenia vytvorte script1.js a script2.js, s takýmto obsahom:


Napríklad, stačí! Teraz, aby ich nebolo možné kontaktovať, musíte sa ho opýtať na serveri, to sa robí vďaka file.htaccess.

HTACCESS je konfiguračný súbor nastavený vývojárom, používateľom tohto servera.

HTACCESS má taký obsah:

Potom na žiadosť:

Uvidíte toto:

Tak, váš bezpečnostný priečinok je skrytý pred zvedavými očami, je to neprístupné.

Ak sa pokúsite pripojiť skripty:

Potom v každom prípade, vaše súbory nebudú vykonané, pretože sú globálne skryté serverom

e)Vráťte sa na program PHP v Index.php

Spodná čiara je, že PHP má prístup k všetkým súborom na serveri, bez ohľadu na to, či sú skryté alebo nie, to znamená, že ak sa zaregistrujete:


Potom B. tento prípad Uvidíme obsah nášho skrytého skriptu.

Avšak z iného servera nie je možné vidieť obsah nášho skriptu, a chybové hlásenie sa vráti 500. Toto je naša ruka, takže iné stránky nebudú môcť čítať naše skryté súbory.

e)Takto bude vyzerať konečný výsledok:

A teraz sa zaoberáme, ako to všetko funguje. jQuery vykoná požiadaný dotaz (to pomáha vyhnúť sa otvorom v indexe.php) na serveri "index.php? js \u003d výsledok", ak sa žiadosť z nášho servera (Stross () a adresa nášho Server "http: / / skript" - c na účet tohto príkladu), potom skript skontroluje post-premennú, to znamená adresu nášho skrytého skriptu a dáva textový výsledok. Metóda JQuery Hot () dostane odpoveď vo forme tohto textu, a tento text je možné previesť na prácu Javascriptu, to robí štandardnú cross-tram funkcie eval ();

Nakoniec

Získame náš výsledok, naše skripty nemožno vidieť staticky alebo dynamicky prostredníctvom konzoly prehliadača, ale je ľahké vidieť ich prácu. Tieto skripty a ich funkcie sa ľahko vykonávajú. Je však potrebné dobre uvažovať o uplatňovaní tejto techniky, pretože v tomto prípade sa vydáva otázka výkonu, rýchlosti. Funkcia eval (kód) vývojári JavaScript Je to považované za zlo a odporúča sa použiť svoj analóg novej funkcie ("návrat" + kód), hoci posledný nevie, ako určiť funkcie vnútri, to znamená, že definícia funkcie je zaznamenaná vo vašej premennej , Kód \u003d "Funkčný test () (upozornenie (1);); Test (); ", kód nebude splnený, čo znamená, že eval () sa približuje všetkým prípadom života, pravda má svoje vlastné nuansy, ktoré ešte musia čítať.

Či už ste niekedy skryli, aby ste sa schovali pred outsidermi na vašej stránke skriptu, ktorý implementuje nerealistický krásny vzhľad menu alebo vykonávať iné akcie, ktoré by ste nechceli vidieť čoskoro na každú druhú stránku?
Ak áno, metóda opísaná v tomto článku bude pre vás užitočná v spojení s konaním kódexu. Zároveň budem rezervovať naraz, že metóda nie je 100%, ale z väčšiny neprofesionálnych a súčasťou profesionálov bude chrániť.

Teória

Predpokladajme, že máme nojs.php stránku a na ňom je skript tajomstva. Prehliadač a používateľ môžu získať skript zo servera nasledujúcimi spôsobmi:
  1. Načítanie skriptu priamo umiestnené na stránke alebo naložené DOM;
  2. Zobraziť skript v okne Zdrojový kód stránky;
  3. Uloženie stránky so všetkými súbormi na pevnom disku;
  4. Zadanie priamej adresy URL v paneli s adresou.
V prvom prípade prehliadač nevyhnutne prenáša hlavičku HTTP http_referer.
V druhom a treťom prípade sa neprenáša všetky prehliadače (Chrome, Firefox vydá predtým sťahovaný skript z cache; Opera, tj je skript opäť načítaný, ale bez odosielania referer).
Vo štvrtom prípade sa odkazuje na žiadne z týchto štyroch prehliadačov.
Ak dáte Javascript dynamicky s kontrolou hlavičky referer v dotaze, potom budeme okamžite chrániť pred operou a tj, ale pre CROME a Firefox bude musieť prísť s niečím na nahrávanie. Najprv si stiahneme jeden skript, ktorý zase načíta iný skript, zatiaľ čo obe sťahovanie budú skontrolované pre HTTP referer. Vedecká metóda sa zistilo, že ak dynamicky vytvoríte skript na stránke Document.CreateEeteEeTeement ("Skript") a potom ho odstráňte zo stránky, potom skript bude fungovať ako obvykle, ale nebude sa uložiť.

Prax

nojs.php.
Táto stránka nesie cieľ na stiahnutie script1.php
Nájsť Js.
Po 10 sekundách by ste mali vidieť prácu skrytého skriptu vo forme AlLT, kliknite na odkaz po upozornení, aby ste sa uistili, že udalosti tiež nespadli. V tomto odkaze môžete vidieť skrytý skript
script1.php.
Jeho úloha: Dynamicky Stiahnuť Script2.php, ak existuje záhlavie odkazovača. Časy môžu byť znížené v závislosti od približného času skrytého skriptu.
script2.php.
Jeho úloha: Dajte koncový skript, ak existuje hlavička odkazu

Výsledok

V dôsledku toho dostaneme, že nemôžeme vidieť na pôvodnej stránke stránky, ani sťahovať ani uložiť skrytý skript pomocou testovaných štyroch prehliadačov. Vo všeobecnosti ho môžete vidieť dvoma spôsobmi:
  • Prejdite na odkaz priamo na stránke script2.php a nachádza sa na stránke našej stránky;
  • Tvorba požiadavky HTTP označujúcej hlavičku odkazujúceho v ňom.
Zvýšte účinnosť schôdze týmito metódami:
  1. Pomocou mod-prepísania, výmena Script1.js a script2.js server na script1.js a script2.js na script1.php a script2.php, takže na stránke sú všetky obvyklé súbory JS, pretože PHP prudko ponáhľa;
  2. Urobte si fiktívny scenár ako komplex, ako je to len možné, hodnoverné a mätúce, aby sa osoba, ktorá sa snažila rozobrať, je dosť naliata pred povedomím o tom, čo bol podvedený;
  3. Kód spracovania.

Dobrý deň, čitateľ.
V tomto malskom článku chceme povedať, ako správne optimalizovať kategórie pre internetový obchod.
Keď začneme optimalizovať text, najprv si nastavte stránku na maximálny význam. Ako to spraviť .
V tejto situácii sa však vyskytne nasledujúci problém - musíte dokončiť príliš veľa textu, a to sa nezmestí na dizajn stránok.
Takže musíte skryť časť textu od užívateľovAle ak sa zrazu chce návštevník prečítať, aby ho mohol ľahko otvoriť.

Zaujímavé riešenie je implementované v internetovej hypermarkete "zásuvka". Kategórie:

Keď klikneme na tento odkaz, otvorí sa Úplný popis bez reštartu. Ak chcete implementovať rovnaké rozhodnutie, potom je opísané nižšie, ako sa realizuje v praxi.
Tento moment je možné vyriešiť v dôsledku programovacieho jazyka JavaScriptu.
JavaScript bol pôvodne vytvorený, aby sa webové stránky "nažive".
Nastavenie webovej stránky javascript skripty, musíte zadať deskriptor. Kód môže byť umiestnený ako v telese hlavičky (medzi tagmi ) A v tele stránky (medzi tagmi ).
Aby ste mohli pracovať scenár, musíte vytvoriť funkciu, ktorá sa použije v ktorejkoľvek časti stránky. Budeme používať funkciu funkcie sh ()

Ak chcete zobraziť operáciu skriptu, musíte ho v tomto formulári umiestniť na zadané miesto.

Čítaj viac ...



Funkcia SH () sa tu nazýva.
Na predvolený skrytý text bol otvorený v zmene kódu displej: Žiadne na displej: Blok.

Tu je príklad toho, čo sa stalo po použití funkcie na text:

V tomto príklade boli na stránke ukryté 3000 SEO-textových znakov, ktoré boli napísané na podporu stránky. Keď kliknete na samotný odkaz, odkaz "Viac ..." zmizne vďaka štýlu štýlu.display uvedené vo funkcii.
Takže túto funkciu môžete implementovať. Ak máte akékoľvek otázky, opýtajte sa ich v komentároch.

Najjednoduchšie riešenie pre zobrazenie / skrytie HTML prvku dokumentu pomocou JavaScriptu. Podrobnosti Popis podstaty procesu a jeho vlastností.

Konvenčné prostriedky na vyschnutie (Eng. skryť sa) alebo show (Eng. Šou.) HTML prvok dokumentu nie je možný. Ak to chcete urobiť, použite vlastnosť CSS ukážka alebo viditeľnosť.. Rozdiel medzi nimi je to viditeľnosť.Hoci to robí HTML prvok neviditeľný, ale miesto, ktoré zaberá, zostáva za ním. Je jasné, že je oveľa častejšie používané ukážka.

ukážka (z angličtiny. ukážka) - Viacúčelový majetok, ktorý určuje, ako by mal byť prvok zobrazený v dokumente.

Zoznam možných hodnôt vlastností CSS ukážka, Chápené rôznymi prehliadačmi, nie je veľký, ale to je dosť.

  • blokovať - Prvok sa zobrazuje ako blok. Použitie tejto hodnoty pre vložené prvky, ako napríklad tag, spôsobuje, že sa správať ako bloky, t.j. Vesmovanie prebieha na začiatku a na konci obsahu.
  • v rade - Položka sa zobrazí ako vstavaný. Použitie tejto hodnoty pre blokové prvky, ako napríklad DIV tag, spôsobuje, že sa správať ako vstavaný, t.j. Jeho obsah začne s miestom, kde sa predchádzajúci prvok skončil.
  • zoznam. - Prvok sa zobrazí ako blok a pridáva sa značka zoznamu.
  • nefajčiarsky - skryje prvok v dokumente. Miesto obsadené ich nie je rezervované a webová stránka je vytvorená ako prvok a tam nebol.

Je jasné, že na zmenu vlastnosti CSS konkrétneho HTML prvku musíte použiť skriptovací programovací jazyk. V našom prípade je to JavaScript. Ale všetko je v poriadku.

Po prvé, musíte presne rozhodnúť, ako kontaktovať HTML-element dokumentu. Ak to chcete urobiť, môžete použiť metódu objektu GetelemetById objektu dokumentu, ktorý vráti odkaz na HTML-prvok ID atribútu ID. Napríklad:

dokument.celememetById ("Test")

Teraz musíme pristupovať k vlastnostiam štýlu príslušného HTML prvku. To používa vlastnosť štýlu. Napríklad:

dokument.celememetById ("test"). Štýl.display

Zostáva len vytvoriť prvok kontroly, ktorý by posúvala hodnoty majetku CSS ukážka, na akomkoľvek prípade, napríklad Onclick (kliknite na myš). Stojí za to zaplatiť pozornosť tomu, že na vyriešenie úlohy budete musieť skontrolovať aktuálnu hodnotu majetku CSS ukážka A zmeniť ho na "opačný". V našom prípade, skryť, budeme používať hodnotu nefajčiarskya zobraziť "Prázdne". V druhom prípade odstránime majetok CSS ukážka Vo vhodnom prvku, ktorý umožní správne fungovať pomocou blokov a vložených HTML prvky.

Pre jasnosť uvediem nasledujúci príklad:

Zmena

Upozorňujeme, že DIV tag má atribút štýlu s displejom: Žiadna hodnota. Touto cestou? Špecifikujeme hodnotu CSS vlastností ukážka V predvolenom nastavení sa rovná nefajčiarsky. HTML prvok sa spočiatku skryje.