Iframe un Frame — kas tie ir un kā vislabāk izmantot rāmjus HTML. Norādiet ceļu elementa Frame atribūtā Src

Sveiki, dārgie emuāra vietnes lasītāji. Šodien mēs runāsim par rāmjiem HTML. Ir skaidrs, ka mēs sāksim no sākuma, proti, ar to, kāds dzīvnieks tas ir. Mēs arī runāsim par šo elementu tagadni (Frame) un nākotni (Iframe) pašreizējā hiperteksta iezīmēšanas valodas versijā un jaunajā Html 5 standartā ar .

Raksta beigās, pēc detalizēts apraksts iebūvēto rāmju izveides process un to klasiskā struktūra Html kodā (jau reti izmantots), mēs pieskarsimies jautājumam par vietnes izveides nozīmi uz tiem, kā arī apspriedīsim iespējamie veidi to pielietojums pašreizējā laika periodā, izmantojot mana emuāra piemēru.

Kas tas ir? Izrādās, tos var izmantot ne tikai vietnēs, bet arī jebkurās aplikācijās programmām, taču tās atšķiras ar to, ka tīmekļa lapas vai aplikācijas logs tiks sadalīts vairākos apgabalos, kuros katrā tiek ielādēts atsevišķs dokuments. . Turklāt šie rāmja apgabali darbojas neatkarīgi viens no otra.

Iespējams, ka visredzamākais to izmantošanas piemērs, ar ko gandrīz visi ir sastapušies, ir tā sauktie palīdzības faili, kas ir daudzām jūsu datorā instalētajām programmām.

Fails ar palīdzības izvēlni tiek ielādēts kreisajā logā, un labajā logā tiek parādīts atlasītajam izvēlnes vienumam atbilstošais dokuments. Jāatzīmē, ka šī struktūra ļauj izvairīties no faila ar izvēlni atkārtotas ielādēšanas kreisajā logā, atverot jaunu dokumentu labajā logā. Tieši tā ir galvenā rāmju izmantošanas priekšrocība HTML.

Faktiski pats šo elementu nosaukums ir jāinterpretē kā neatkarīgs logs. Ar rāmju palīdzību mums ir iespēja sadalīt vienu lielu logu vairākos fragmentos, kas savukārt var kalpot kā uztvērēji atsevišķiem viens no otra neatkarīgiem dokumentiem (lapas, teksti, attēli, video u.c.).

Kā hiperteksta iezīmēšanas valodā tiek izveidota rāmja struktūra? Ja mēs runājam par Html 4.01 standartu (pēc klasifikācijas), kas šobrīd ir galvenais, tad šim nolūkam tiek izmantoti trīs elementi - Frame, Frameset un Noframes.

Ja runājam par Html 5 standartu (mūsu nākotni, kura dažus elementus jau atbalsta daudzas pārlūkprogrammas), tad vairs nebūs Frame, Frameset un Noframes tagu, kā arī tā vietā būs klasiskā rāmja struktūra viens atsevišķs Iframe tags (iegultais rāmis) , par kuru mēs runāsim sākumā, un pēc tam pievērsīsim uzmanību klasiskajai shēmai no versijas 4.01, kas pašlaik tiek izmantota.

Iframe, atšķirībā no tālāk aplūkotajiem klasiskajiem elementiem, nav jāaizstāj Body tags ar Frameset tagiem. Tie. šo tagu var ievietot parastās lapās, piemēram, rindkopas iekšpusē vai jebkur citur. Savā būtībā šis elements ir ļoti līdzīgs Img tagam, kuru mēs jau esam apsvēruši.

Tas ir iekļauts elements ar aizstātu saturu, jo tas darbojas tieši tāpat kā iekļauts elements, taču tajā tiek parādīts svešs saturs. ārējais saturs. HTML valodā ir tikai četri šādi elementi - Img, Iframe, Object un Embed. Tāpēc mūsu varonis nozīmē ārēja faila klātbūtni, kas tiks ielādēts apgabalā, kura lielums ir iestatīts, izmantojot šī taga atribūtus.

Tas. Iframe ir izlietnes elements, kurā tiek ielādēts ārējs objekts (piemēram, video). Un, lai norādītu ceļu uz šo failu, kas jāielādē lapā, izmantojiet īpašo Src atribūtu. Bet atšķirībā no Img, Iframe elements ir savienots pārī, t.i. Ir arī noslēguma atzīme:

Šajā piemērā ir parādīta izvade Youtube video lapā, izmantojot Iframe. Lai ierobežotu rāmja (loga) laukumu, kurā tas tiks ielādēts ārējais fails, ir platums un augstums atribūti, kuru vērtības ir norādītas pikseļos:

Tie. šis tags izveido apgabalu, kurā tiek ielādēts kāds ārējs objekts (nav svarīgi, vai tas ir no jūsu vietnes vai cita resursa). Apgabala platums un augstums tiek norādīts, izmantojot platumu un augstumu, un atribūts Src norāda ceļu uz šo objektu.

Elements Iframe visus šos atribūtus mantojis no līdzīgiem iekļautiem tagiem ar aizstātu saturu (piemēram, jau minēts iepriekš). Nu, viņš no attēliem paņēma arī Hspace un Vspace atribūtus, kas ļauj iestatīt atkāpes no rāmja apmalēm līdz tekstam, kas ap to aptin.

Būtiski ir arī tas, ka iebūvētā rāmja izlīdzināšana tiek veikta tieši tādā pašā veidā, kā mēs varējām redzēt, pētot attēlus Html - . Tas pats līdzinājums , bet Iframe tagam ar iespējamām vērtībām apakšā, augšā, vidū, pa kreisi un pa labi.

Bet šis elements arī paņēma vairākus atribūtus no Frame taga no klasiskās rāmja struktūras, par ko mēs ļoti detalizēti runāsim tālāk tekstā. Šie atribūti ietver Name, kura vērtību var izmantot kā vērtību, lai šī rāmja logā atvērtos nepieciešamais dokuments, noklikšķinot uz saites (vairāk lasiet zemāk).

Arī programmā Iframe atribūts Frameborder tika migrēts no Frame taga, kuram ir tikai divas vērtības — vai nu 0 (rāmis ap rāmi netiek rādīts) vai 1 (rāmis ir redzams). Noklusējuma vērtība ir Frameborder=1, tāpēc, lai to noņemtu, būs jāievada Frameborder="0":

Arī atribūts Scrolling ir pārcelts no Frame uz šo elementu, kura noklusējuma vērtība ir Automātiski — ritjoslas rāmī parādīsies pēc vajadzības, ja saturs ir lielāks par tā loga izmēru, kas paredzēts tā attēlošanai.

No elementa Frame tika pārvietoti arī atribūti Marginwidth un Marginheight. Tie tiks detalizēti apskatīti tālāk tekstā, bet īsumā - tie ļauj iestatīt atkāpi platumā un augstumā no rāmja malām līdz saturam, kas tajā ievietots.

Kā jau minēju, spilgts Iframe izmantošanas piemērs ir:

Ievietojot Iframe tieši tīmekļa lapā, jūs saņemsit videoklipa izvadi no YouTube. Mēs secinām, ka šis elements ir krustojums starp iekļautiem elementiem ar aizstātu saturu un faktiski klasiskajiem rāmjiem, par kuriem mēs tagad runāsim.

Tātad, klasiskās rāmja struktūras izveide sākas ar to, ka ievadāt un aizverošos Body tagus vietā ierakstāt HTML kodu, kam parasti vajadzētu būt jebkurā dokumentā, aizstājot to ar konteineru, kura pamatā ir Frameset elementi.

Galvenais ir tas, ka šajā gadījumā nevar izmantot elementu Body - ne Body (parastam dokumentam), ne Frameset (veidojot dokumenta rāmja struktūru):

Katrs rāmis, ko veidojam galvenajā, tiek izveidots, izmantojot atsevišķu Frame elementu. Šis tags ir viens, un tajā mēs iestatām ceļu uz dokumentu, kas tiks ielādēts šajā logā.

Trešais elements, kuram mēs vēl neesam pieskārušies, ir Noframes. Tas ir savienots pārī un ļauj iekšā ierakstīt tekstu, ko pārlūkprogramma apstrādās un parādīs tīmekļa lapa tikai tad, ja šī pati pārlūkprogramma (vai cita displeja ierīce) neatbalsta rāmjus. Tas var notikt, piemēram, ja izmantojat mobilo ierīču pārlūkprogrammu.

Parasti Noframes pievieno ne tikai informāciju par pašreizējo situāciju ar rāmja struktūras apstrādes neiespējamību, bet arī pievieno iespēju pāriet uz citām lapām, kur var turpināt darbu, tās neizmantojot. Par viņu ir grūti pateikt kaut ko citu, tāpēc turpināsim.

Izrādās, ka Body tag vietā izmantotais elements Frameset aizņem visu apskates laukumam atvēlēto vietu, un šajā apgabalā tiks izveidoti rāmji, izmantojot atsevišķi elementi Rāmis. Šajā sakarā rodas jautājums - kā sadalīt skatu laukumu starp atsevišķiem logiem vai, citiem vārdiem sakot, kā iestatīt katra no tiem izmēru.

Tas tiek darīts, pievienojot atbilstošos atribūtus Frameset elementam. Ir divi no tiem - Cols un Rows. Cols iestata liela loga sadalīšanu vertikālos rāmjos vai kolonnās, un Rows ļauj to sadalīt horizontālos logos vai rindās.

Html Frameset taga Cols un Rows vērtības ir skaitļi, kas atdalīti ar komatiem (bez atstarpēm). Šie skaitļi nosaka logu proporcijas, kuras mēs vēlamies iegūt rezultātā. Tāpēc neatkarīgi no tā, cik ar komatiem atdalītu skaitļu ir rakstīts Cols vai Rows, rezultāts būs mūsu rīcībā esošo kadru skaits.

Piemēram, izmantojot šo ierakstu, mēs iegūsim trīs vertikālas kolonnas, kuru platums atbildīs proporcijām 2:5:3.

Tā kā esam iestatījuši proporcijas trim kadriem, mums būs jāiekļauj trīs Frame elementi starp Frameset sākuma un aizvēršanas tagiem, vismaz nenorādot papildu atribūtus:

Rezultātā mūsu rāmja struktūra, kas sastāv no trim tukšiem logiem, izskatīsies šādi:

Šajā piemērā loga izmērus (Rāmis) iestatām, izmantojot procentus, kas tiek ņemti no skata laukuma platuma (tas ir gadījumā, ja tiek izmantotas Cols) vai no tā augstuma (Rindas). Mainot skata logu, procentuālā attiecība starp kadru izmēriem tiks saglabāta. Bet procentuālo attiecību vietā varat izmantot arī vienkāršus skaitļus, kas nozīmēs. Arī šeit, manuprāt, nevajadzētu rasties izpratnes grūtībām.

Bet izmēru apzīmējumos ir arī diezgan neparasta iespēja, kas izskatās kā zvaigznīte “*”. Turklāt tas var būt tikai “*” vai zvaigznīte ar skaitli priekšā, piemēram, “3*”. Gudrs sīkums, kas ir ļoti līdzīgs procentiem un nozīmē, ka mēs sadalām Rāmja telpu proporcionāli.

Apskatīsim piemēru. Tagad izvēlēsimies sadalīt skata logu horizontālās rindās, izmantojot Rows:

Ko nozīmē šis ieraksts? Viss mums vertikāli pieejamais skatīšanās laukums tiks sadalīts trīs līnijās. Pirmās augstums tiks uzņemts pie 200 pikseļiem, otrā - pie 500, bet trešā rinda aizņems visu atlikušo vietu augstumā, jo “*” tika izmantots kā tā izmērs.

Ievērības cienīgs ir tas, ka vērtības “*” un “1*” nozīmē vienu un to pašu - mēs sadalām visu atlikušo vietu vienā un piešķiram šim rāmim šo vienu daļu (nu, tas ir, visu atlikušo vietu).

Bet paskatieties, kas notiek, ja izmantojat vērtību “*” ar skaitli, lai dalītu proporcionāli:

Kādi, jūsuprāt, šajā gadījumā būs rāmja izmēri? Skaidrs, ka otrā rinda noteikti būs 100 pikseļu augstumā. Bet kā atlikušā telpa tiks sadalīta augstumā starp trešo un pirmo rindu?

To ir diezgan viegli aprēķināt — vienkārši pievienojiet četri (4*) diviem (2*) un izdaliet ar šo saucēju (atcerieties daļskaitļus no skolas mācību programmas) divi un četri. Tie. mēs iegūstam, ka pirmā kolonna ar rāmi aizņems vienu trešdaļu no atlikušās vietas augstumā, bet trešā kolonna - divas trešdaļas. Vai, citiem vārdiem sakot, trešais būs divreiz augstāks par pirmo:

Varat izmantot visus trīs veidus, kā noteikt logu izmērus vienā atribūtā, piemēram:

Rezultātā mēs iegūsim pirmo Rāmja kolonnu ar platumu desmit procentiem no visa pieejamā laukuma, otro - 100 pikseļus, bet atlikušo trīs platums būs proporcijā četras, trīs un divas devītdaļas no. atlikušā platuma vieta. Tātad viss ir vienkāršs un skaidrs.

Ja vēlaties sadalīt galveno logu ne tikai horizontālos un vertikālos rāmjos, bet, piemēram, to kombinācijās, varat izmantot Frameset elementu ligzdoto struktūru atsevišķi kolonnām un atsevišķi rindām. Piemēram, lai iegūtu zemāk esošajā ekrānuzņēmumā redzamo struktūru, pietiek ar šādu konstrukciju:

Tie. vispirms mēs sadalām ar "frameset cols="20%,80%"" visu pieejamā telpa divās kolonnās vertikāli un iestatiet labās kolonnas saturu ar tagu “frame”, bet tā vietā, lai pievienotu elementu “frame” kreisajai kolonnai, mēs atveram jaunu “frameset rows = “10%*””.

Un ar tā palīdzību mēs sadalām labo kolonnu divās rindās ar rāmjiem, kuru saturs tiek iestatīts, izmantojot divus “frame” tagus, pēc tam aizveram abus “frameset” konteinerus. Viss ir vienkārši un loģiski.

Bet mēs visi runājām par Frameset elementu un tā atribūtiem Cols un Rows, ar kuru palīdzību mēs veidojam struktūru un iestatām to izmērus. Tagad izdomāsim, kā parādīt nepieciešamos dokumentus nepieciešamajos rāmjos un kā konfigurēt mijiedarbību starp to logiem.

Tātad, kā mēs pārvaldām izskatu? izveidoti logi? Tas viss ir ietverts Frame taga atribūtos. Pirmais, ko vērts pieminēt, ir Src. Mēs jau esam viņu satikuši tags Attēls kad apskatījām attēlu ievietošanu HTML kodā. Tā būtība nav mainījusies un joprojām ļauj norādīt ceļu uz dokumentu, kas jāielādē rāmī.

Ceļu uz dokumentu Src var norādīt kā . Relatīvie ceļi parasti tiek izmantoti dokumentam, kas atrodas jūsu resursā, taču jums būs nepieciešami absolūti ceļi, ja vēlaties ielādēt dokumentu no citas vietnes rāmja logā.

Ja Src atribūts nav norādīts, norādot ceļu uz nepieciešamo dokumentu, tad logā tiks ielādēts tukšs dokuments. Personīgi es kādreiz līdzīgu izdarīju savam emuāram (kā papildu navigācijas elementu) un tajā pašā laikā izveidoju tam atsevišķu mapi hostinga serverī un ievietoju tur ne tikai HTML failu ar rāmja struktūru (ko es saucu par indeksu .html), bet arī visi ielādēti dažādos dokumentu logos, kā arī attēlu faili, kas tika izmantoti kā foni.

Tāpēc man bija visvieglāk izmantot relatīvās saites Frame taga atribūtā Src:

Ievērības cienīgs ir tas, ka, aizstājot visas šajā kodā norādītās saites no relatīvā uz absolūto (piemēram, https://site/navigator/joomla.html) un atverot šo failu pārlūkprogrammā, tiks ielādēti Frame norādītie dokumenti. no mana servera, un jūs redzēsit līdzīgu attēlu savā pārlūkprogrammā. Turklāt nav svarīgi, kur atradīsies jūsu fails ar rāmja struktūru (index.html) - datorā vai mitināšanā.

Attēlā redzamajā piemērā kreisā rāmja logā tiek ielādēta lapa ar noteiktu izvēlni, kas ir parasta izvēlne. Taču svarīgi nav tas, kā tiek veidota izvēlne, bet gan tas, kas notiek pēc noklikšķināšanas uz kādas no tās saitēm.

Ja jūs to izdarīsit, tad viss notiks tieši tā, kā vajadzētu - dokuments tiks atvērts loga apakšējā labajā stūrī. Bet šim nācās izmantot vienu mazu triku, jo noklusējuma versijā dokuments atvērās visā loga izmērā, nomainot rāmja struktūru, kas man nemaz nebija vajadzīga, jo navigācijas izvēlne kreisajā un augšējā rāmjos pazuda.

Tātad, kad mēs runājām par hipersaitēm, mēs minējām taga atribūtu “A” kā Target=_blank. Vai atceries, kam tas paredzēts? Ir pareizi atvērt saistīto dokumentu jaunā logā. Pēc noklusējuma tam vajadzētu atvērties tajā pašā logā, kas ir līdzvērtīgs target="_self".

Bet Target iespējas ar to nebeidzas. Izrādās, ka tam var pievienot vērtību rāmja nosaukuma veidā, kas iepriekš ir norādīts Frame taga īpašajā Name atribūtā. Tad dokuments, izmantojot šo saiti, netiks atvērts tajā pašā logā, aizņemot visu vietu, bet gan jūsu norādītajā rāmī. Vai ir skaidrs? Ja ne pilnībā, tad tas kļūs skaidrs tagad, analizējot piemēru.

Tātad, atgriezīsimies pie mūsu piemēra, kas parādīts attēlā tieši iepriekš. Mums ir jāatver lapas, izmantojot saites no kreisā loga apakšējā labajā (lielajā) rāmī. Tāpēc vispirms šim lielajam logam ir jāpiešķir nosaukums, izmantojot atribūtu Name Frame tagā.

Viņi to izgatavoja un sauca par "ktonu". Tagad varat droši atvērt failu, kas tiek ielādēts kā izvēlne kreisajā logā, un pievienot atribūtu Target="ktona" visiem tajā esošajiem A tagiem:

Joomla un VirtueMart komponenta vēsture

Protams, izmantojot meklēšanas un aizstāšanas rīku, nebūs grūti to nolikt visām hipersaitēm, bet kāpēc lieki ielādēt kodu, ja mums ir lieliska iespēja izmantot īpašo Base tagu, ko jau minējām tajā pašā raksts par hipersaitēm, kad viņi runāja par Target blank izmantošanu.

Pietiek tikai ievietot elementu base target="ktona" starp sākuma un aizvēršanas tagiem Head, un visas saites šī dokumenta HTML kodā atvērs jaunas lapas norādītajā rāmī ar nosaukumu "ktona":

Starp citu, ja par piemēru ņemam manu kādreiz eksistējošo rīku, tad tomēr ir jāpārliecinās, ka visas saites no augšējā horizontālā loga atver savas lapas kreisajā vertikālajā rāmī, kas kalpo kā mana kreisā izvēlne. Kas šim nolūkam ir jādara?

Pirmkārt, kreisajam vertikālajam rāmim ir jāpiešķir nosaukums:

Un failā, kas tiek ielādēts augšējā logā (gor.html), jums jāpievieno bāzes elements target="gor":

Tas arī viss, tagad mēs visu esam izdarījuši pareizi. Visi dokumenti, kas seko saitēm no augšējā rāmja, tiek atvērti kreisajā logā, un visas saites no tā atvērs dokumentus centrālajā un lielākajā rāmī. Manuprāt, viss ir vienkārši un loģiski.

Tagad apskatīsim, kādus atribūtus, izņemot Src un Name, var izmantot Frame tagā, lai pielāgotu kadru izskatu. Sāksim ar ritināšanu. Izmantojot to, mēs varam konfigurēt ritjoslu attēlošanu katram jūsu rāmja struktūras logam atsevišķi.

Ritināšanai ir noklusējuma vērtība Auto — pārlūkprogramma, pamatojoties uz rāmī ielādētā dokumenta lielumu, automātiski izlems, vai rādīt ritjoslu vai nē. Ja dokuments pilnībā neietilpst logā, parādīsies ritjosla, kas ļauj to visu apskatīt līdz beigām.

Varat arī izmantot vērtības Jā (ritjoslas logā vienmēr tiks rādītas, pat ja dokuments tajā pilnībā iekļaujas) un Nē (ritjoslas nekad neparādīsies, pat ja daļa no dokumenta neietilpst) kā ritināšanas vērtības.

Savā kādreiz esošajā rīkā es izmantoju noklusējuma vērtību Auto, un pēc vajadzības parādījās ritjoslas kadros:

Nākamais Frame taga atribūts Noresize ir viens atribūts (tam nav vērtību). Reģistrējot to, jūs tādējādi aizliedzat mainīt tā lielumu, kas pēc noklusējuma tiek darīts, vienkārši velkot kadru apmali ar peli.

Pārvietojot peles kursoru uz apmali, redzēsiet, ka kursors pārvērtīsies par divvirzienu bultiņu un tagad, noklikšķinot uz kreisā poga peli, jūs varat pārvietot apmali, kā vēlaties. Noresize aizliedz šo apzinātību (virzot peles kursoru uz logu malu, jūs vairs neredzēsit divvirzienu bultiņu).

Vēl viens vizuālais atribūts ir Frameborder. Izmantojot to, jūs varat norādīt, vai starp kadriem zīmēt rāmi (apmali) vai nezīmēt. Rāmja apmalei var būt tikai divas iespējamās vērtības - vai nu 0 (nezīmēt rāmi) vai 1 (rādīt apmali). Noklusējuma vērtība, protams, ir 1.

Ir viens smalkums. Ja vēlaties noņemt redzamo apmali, jums būs jāpievieno Frameborder=0 visiem rāmju tagiem, starp kuriem vēlaties noņemt redzamās apmales.

Jāņem vērā arī daži Frame taga atribūti - Marginwidth un Marginheight, kas nosaka piemales platumā (labajā un kreisajā pusē) un augstumā (augšējā un apakšējā) no loga apmalēm līdz tajā ielādētajam saturam. (skaitlis nozīmē piemales pikseļu skaitu):

Apskatīsim, kāds ir klasisko struktūru fundamentālais trūkums, kas būtībā pieliek punktu to izmantošanai, veidojot vietni. Tas sastāv no tā, ka, izmantojot šo rāmja struktūru, nav iespējams izsekot tā stāvoklim.

Sarežģītām struktūrām var būt tūkstošiem dažādu stāvokļu (dažādos rāmja logos atvērto dokumentu varianti), taču tieši šīs struktūras URL adrese nemainās. Šī iemesla dēļ nebūs iespējams izmantot pārlūkprogrammas grāmatzīmes vai nosūtīt citiem lietotājiem saites uz lapām, kas jums patīk. Kāpēc?

Tā kā adrese paliek nemainīga, pat atverot to no pārlūkprogrammas grāmatzīmēm vai no e-pasta e-pasts, jūs iegūsit lapu ar rāmja struktūras sākuma stāvokli, nevis stāvokli, kuru vēlaties saglabāt.

Lai gan, protams, šo problēmu var atrisināt, bet ne ar HTML rīkiem, bet ar servera (piemēram, Php) vai klienta programmēšanas valodu (JavaScript) palīdzību, un šie risinājumi nebūs simtprocentīgi efektīvi. Šādi risinājumi faktiski ļauj pievienot papildu datus par tā pašreizējo stāvokli rāmja struktūras URL adresei, taču to nav viegli izdarīt, un uzticamība nebūs absolūta.

Šis ir pirmais trūkums, izmantojot rāmjus vietņu izveidei, un tas ir ļoti nozīmīgs, taču ir vēl viens milzīgs trūkums. Meklētājprogrammas, protams, jau sen ir iemācījušies tos indeksēt un izvilkt no tiem to dokumentu adreses, kas tiek ielādēti viņu logos. Problēma ir cita.

Kad lietotājs no Yandex vai Google meklēšanas rezultātiem pāriet uz jūsu vietni, kas izveidota, pamatojoties uz rāmja struktūru, tiks atvērts tikai dokuments, kas tika ielādēts vienā no rāmjiem, nevis visa struktūra. Vai jūs saprotat, par ko es runāju?

Lietotājs redzēs dokumentu un neredzēs navigāciju jūsu vietnē, jo tas būs aizsargāts citos logos, un tie tiek ielādēti tikai kā daļa no visas struktūras.

Tā rezultātā vietne, kas veidota uz rāmjiem, vienkārši kļūst nelietojama. Lai gan šai problēmai atkal ir risinājumi, pamatojoties uz servera skriptiem, kad tiks veikta novirzīšana no atsevišķu dokumentu adresēm uz rāmja struktūru, kas atrodas pareizā stāvoklī, bet tas atkal ir ļoti grūti un ne vienmēr uzticami.

Kopumā secinājumu var izdarīt viennozīmīgi – nav jāveido mājas lapas uz rāmjiem. Bet tie tiek pastāvīgi izmantoti, lai izveidotu palīdzību dažādām lietojumprogrammām, un tie var noderēt citās mazās lietās.

Piemēram, es izveidoju rāmja struktūru, kuru nosaucu par "Navigatoru" (tagad tas ir uz laiku noņemts) un kas ir kļuvusi par sava veida paplašinātu ārējo izvēlni manam emuāram, kam, manuprāt, vajadzētu vienkāršot darbu ar resursu. un tāpēc uzlabot “nav muļķības” ir ļoti, ļoti spēcīga ietekme uz vietnes reklamēšanu.

Bet tomēr, lai izvairītos no problēmām ar meklētājprogrammas, es aizvēru visu šo rāmja konstrukciju no un arī pievienoju, katram gadījumam, tai visu HTML faili Rodots metatags ar aizliegumu indeksēt:

JOOMLA

Taču visi šie ierobežojumi attiecas tikai uz struktūrām uz Frame un Frameset tagiem, un Iframe tagos iebūvētajiem rāmjiem nav redzamu trūkumu, un tos var un pat vajadzētu izmantot jūsu projektos, vismaz video ievietošanai no YouTube.

Lai tev veicas! Uz drīzu tikšanos emuāra vietnes lapās

Jūs varētu interesēt

Komentāru direktīvas un Doctype HTML kodā, kā arī bloku un iekļauto elementu (tagu) jēdziens
Iegults un objekts — HTML tagi multivides satura (video, zibatmiņas, audio) attēlošanai tīmekļa lapās
Img - HTML tags attēla ievietošanai (Src), teksta līdzināšanai un aptīšanai ap to (līdzināšana), kā arī fona (fona) iestatīšanai
Kas ir hiperteksta iezīmēšanas valoda HTML un kā skatīt visu tagu sarakstu W3C validatorā Select, Option, Textarea, Label, Fieldset, Legend - tags HTML veidlapas nolaižamie saraksti un teksta lauks
Saraksti Html kodā - UL, OL, LI un DL tagi
Fonts (seja, izmērs un krāsa), Blockquote un Pre-tags — mantots teksta formatējums tīrā HTML formātā (bez izmantojot CSS)
Kā krāsas tiek iestatītas HTML un CSS kodā, RGB toņu izvēle tabulās, Yandex izvade un citas programmas

Tīmekļa vietņu izveides rītausmā tīmekļa resursi plaši izmantoja rāmjus, lai parādītu atsevišķas lapu daļas. Taču līdz ar jaunās HTML 5 versijas ienākšanu viss ir mainījies. Iezīmēšanas elementi , un ir novecojuši. Tie tika aizstāti ar vienu tagu - . Kā pievienot html? Zemāk redzamais piemērs būs skaidrs pat programmēšanas iesācējam.

Rāmis ir vairuma pirmo tīmekļa lapu pamatā. Ja tiek tulkots burtiski, šis vārds nozīmē “rāmis”, tas ir, rāmis ir neliela pārlūkprogrammas lapas daļa. Rāmju plašā izmantošana pagātnē ir skaidrojama ar interneta trafika zemo kvalitāti un augstām izmaksām. Parasti vietne tika sadalīta 3-5 daļās, no kurām katra kalpoja noteiktam mērķim:

• “galvene” (augšējais rāmis lapas platumā) - parāda resursa nosaukumu;
• kreisais/labais "stikls" - izvēlnes displejs;
• Centrālais rāmis ir vietnes satura attēlojums.

Lapas sadalīšana daļās ļāva pārslogot tikai noteiktu daļu, to atjauninot. Piemēram, lietotājs noklikšķināja uz izvēlnes vienuma, un centrālajā rāmī tika lejupielādēts jauns saturs.

Kāpēc tas ir vajadzīgs HTML? Piemērs ir satura ievietošana no trešās puses resursa. Klasiskā situācija ir tad, kad tīmekļa izstrādātājs vēlas kartē parādīt objekta atrašanās vietu. Kas man jādara? Uzzīmēt vietnes plānu no nulles? Nē – ir vienkāršāks risinājums: iegult lapā Google Maps, Yandex Maps vai 2GIS elementu. Problēma tiek atrisināta četros posmos.

Turklāt jūs varat izvēlēties kartes izmēru un konfigurēt citas displeja opcijas.

Kā vēl jūs varat to izmantot HTML?? Kā piemēru var minēt video materiālu ievietošanu no Youtube resursa. Multivides tehnoloģijas piesaista interneta lietotājus, tāpēc video saturs ir tik populārs. Izstrādātājs ātri veiks video instalēšanu.

Abos piemēros tika izmantota automātiska koda ģenerēšana, taču profesionāliem izstrādātājiem vajadzētu būt iespējai pašiem rakstīt kodu. Pirmkārt, tas ļaus viņiem saprast lapas izkārtojumu un, ja nepieciešams, to mainīt. Otrkārt, vietnes elementu marķējums (kaut arī tie pieder ārējam resursam) ne vienmēr tiek veidots bez tīmekļa pārziņa līdzdalības. Šeit tiek izmantota izstrādātāja augstā kvalifikācija.

Tātad, pirms sākat lapas izkārtojumu, jums jāapsver iframe (html) tags: kas tas ir un kā to pareizi lietot.

Pirmkārt, jāatzīmē, ka tags ir savienots pārī. Starp sākuma un aizvēršanas elementiem norādiet saturu, kas tiks parādīts pārlūkprogrammās, kas neatbalsta šo iezīmēšanas elementu. Galvenie tagu atribūti:

• platums (platums);
• augstums (augstums);
• src (lejupielādētā resursa adrese);
• līdzināt(līdzināt metode);
• rāmja apmale;
• atļaut pilnu ekrānu.

Tādējādi kods . HTML piemērs ir pilnībā parādīts tālāk:

Iepriekš minētajā marķējumā ir pietiekami aizstāt vietnes adresi ar jebkuru citu un, ja nepieciešams, pielāgot rāmja izmēru.

Pārbaudot vietni, vai tajā nav vīrusu, bieži vien netiek atklāti iframe ievietojumi, kas var ietvert saites uz apšaubāmām vietnēm, taču jaunā versija Pretvīrusu spraudnis WP tos norādīs.

Iframe ieliktņi paši par sevi nav ļaunprātīgs kods, tāpēc tiešsaistes pakalpojumi, kas meklē vietnes vīrusus, tos bieži neatklāj. Izmantojot Iframe ieliktņus, bieži tiek ielādēti faili, kas var atrasties ārējā resursā. Piemēram, šo metodi var izmantot, lai augšupielādētu videoklipu savā vietnē no YouTube. Taču ļoti bieži uzbrucēji izmanto iframe ieliktņus, lai upura vietnē augšupielādētu aizdomīga satura failus.

Jau rakstīju, ka esmu vairākkārt saskāries ar acīmredzami inficētām vietnēm, taču, pārbaudot tās antivirus-alarm.ru resursā, izmantojot vadošo antivīrusu izstrādātāju datu bāzes, nekas aizdomīgs neatklājās. Pārbaude vietnē 2ip.ru norādīja uz aizdomīgu iframe ievietojumu klātbūtni, taču nenorādot konkrētu vietu kodā, kur tos varētu atrast. Tas arī nenorādīja, vai šie ieliktņi bija izdevīgi vai ļaunprātīgi.

Bet ar atbrīvošanu jaunākā versija Ar WP spraudni situācija ir mainījusies. Saskaņā ar izstrādātāja teikto, šis spraudnis tagad parāda iframe ieliktņus. Un jūs pats varēsit noteikt, vai tie ir kaitīgi vai nē. Zinot, kā izskatās iframe ievietojums:

Ja spraudnis to konstatē, pamatojoties uz adresi, kurš resurss ir norādīts šajā ievietojumā, ir viegli noteikt, vai tas ir noderīgs vai kaitīgs.

Atšķirībā no datoru antivīrusiem, kas paši atrod un noņem ļaunprātīgu kodu, lielākā daļa vietnes antivīrusu, piemēram, AntiVirus, atrod tikai kodu, kas ir aizdomīgs no viņu viedokļa. Lēmumu par tā noņemšanu un pašu noņemšanu pieņem lietotājs. Turklāt iesācējiem, kuri nepārzina PHP, patiešām palīdzēs tikai TAC spraudnis, kas paredzēts tēmas pārbaudei. Es zinu tikai vienu spraudni, kas ne tikai atrod, bet arī noņem sliktu kodu. Diemžēl šim spraudnim ir viena nepatīkama iezīme. Ja tas nevar tikt galā ar infekciju vietnē, tas bloķē piekļuvi vietnei, neprasot atļauju.

Tāpēc nevajadzētu instalēt pretvīrusu spraudņus, ja ar jūsu vietni nenotiek nekas aizdomīgs. Lai veiktu profilaktisku vietnes pārbaudi attiecībā uz vīrusiem, prātīgāk ir izmantot iepriekš minētos tiešsaistes pakalpojumus. Tikai pēc tam, kad šajos pakalpojumos ir konstatēts kaut kas aizdomīgs, varat vērsties pie spraudņiem, kas var palīdzēt noteikt atrašanās vietu ļaunprātīgs kods. Atkal, ne visiem ir kvalifikācija tam. Iesācējiem būs vieglāk meklēt palīdzību pie tehniskajiem darbiniekiem. hostinga atbalsts.

Lauvas tiesa vietņu tiek inficētas pēc īpašnieka datora inficēšanās. Rezultātā tiek nozagts administratora pieteikumvārds un parole. paneļi vai no hostinga. Un tikai neliela daļa inficējas uzlaušanas rezultātā. Tāpēc vissvarīgākais vietnes aizsardzības pasākums ir datora drošības uzturēšana. Neaizmirstiet, ka datoram ir jābūt arī labam.

Mēs izveidojām analogu Google rīks Tīmekļa pārziņa marķieris. Atgādināšu, ka Marķieris ir Google tīmekļa pārziņa konta rīks, kas ļauj anotēt savas Open Graph lapas ar tagiem. Lai to izdarītu, vienkārši ar peli atlasiet teksta daļu lapā un norādiet, ka šis ir nosaukums un tas ir vērtējums. Jūsu lapa ir ielādēta tīmekļa pārziņa konta iframe.

Tagad Google, sastapusies ar līdzīgu lapu jūsu vietnē, jau zina, kāds saturs tajā tiek publicēts un kā to skaisti parsēt savā būtībā (raksts, produkts, video...)

Mums bija nepieciešama līdzīga funkcionalitāte. Uzdevums šķita vienkāršs un tikai klienta pusē. Tomēr praksē risinājums ir klienta un servera puses krustpunktā (“tīrie” JS programmētāji var neko nezināt par dažādiem starpniekserveriem un var paiet ļoti ilgs laiks, lai tuvotos projektam). Tomēr es neatradu internetā rakstu, kurā būtu aprakstīta visa tehnoloģija no sākuma līdz beigām. Vēlos pateikties arī BeLove lietotājam un mūsu apsardzei par palīdzību.

Mūsu gadījumā mēs vēlējāmies, lai tīmekļa pārzinis varētu ērti (noklikšķinot ar peli) iegūt xPath vērtību noteiktiem savas lapas elementiem.

Tomēr:

Konkrēti, atļauja-same-origin vērtība (vai drīzāk tās neesamība) tikai norāda, ka iframe vienmēr ir jāuzskata par ielādētu no sveša domēna (piemēram, jūs nevarat nosūtīt AJAX pieprasījumu uz vecākdokumenta domēnu no šāda rāmis)

Pievērsīsim uzmanību iframe elementa atribūtam src: src="https://wmthighlighter.googleusercontent.com/webmasters/data-highlighter/RenderFrame/007....." - mūsu lapa tiek ielādēta admin panelī no plkst. Google domēns. Turklāt tas ir vēl smagāks: pat avota dokumentā esošie skripti un attēli tiek palaisti caur starpniekserveri. Visas src, href... tiek aizstātas html ar starpniekserveriem. Kaut kas līdzīgs šim:

Visi resursi, ko izmanto jūsu lapa, tiek glabāti arī Google starpniekserveros. Lūk, piemēram, mūsu.

Noteikti nosakiet lapas kodējumu (izmantojot http atbildi vai rakstzīmju kopu HTML kodā) — mūsu starpniekserveram ir jāatbild tādā pašā kodējumā kā lapai, kuru mēs ielādējām. Katram gadījumam mēs definēsim arī satura veidu, lai gan ir skaidrs, ka mēs iegūstam lapu teksta/html formātā un atdosim to tāpat.
gala virkne url = request.getParameter("url");
galīgais HttpGet pieprasījumsApache = jauns HttpGet(url);

Mēs ieradāmies, mēs lauzām savu risinājumu, apejot starpdomēnu ierobežojumus. Tagad mēs nevaram atkal sasniegt iframe saturu.

Turpinot atrast risinājumu no Google, es atsevišķā logā atvēru mūsu lapu, kas tiek pasniegta caur starpniekserveri

Un es pamanīju dīvainu kļūdu konsolē.
CrossPageChannel: nevar izveidot savienojumu, vienādranga loga objekts nav iestatīts.
Kļuva skaidrs, ka viss ir sakārtotāks nekā vienkārša lapas ielāde iframe no sava domēna. Lapas sazinās viena ar otru. Attiecīgi mēs virzāmies uz window.postMessage

Šeit ir starpniekservera piemērs mājas lapa Habr ar iegultu skriptu:
http://highlighter.indexisto.com/?md5=6ec7rdHxUfRkrFy55jrJQA==&url=http%3A%2F%2Fhabrahabr.ru&expires=1390468360

Mēs ievietojam nginx starpniekservera priekšā, tas klausās portu 80, un mēs noņemam starpniekserveri uz citu portu. Mēs aizveram visas pārējās ostas, izņemot 80 no ārpasauli.

Tagad liksim starpniekserverim darboties tikai caur administrēšanas paneli. Brīdī, kad tīmekļa pārzinis ievada savas vietnes URL, mēs ātri skrienam uz serveri, kur ģenerējam md5 jaucējkodu no pašreizējā laika zīmoga + 1 stunda, paša URL un īpaši slepenā, ja:
beigu virkne md5Me = timeStampExpires + urlEncoded + "SUPERSECRET";
gala MessageDigest md = MessageDigest.getInstance("MD5");
md.reset();
md.update(md5Me.getBytes("UTF-8"));

Virknes kods = Base64.encodeBase64String(md.digest());
kods = kods.replaceAll("/", "_");

kods = kods.replaceAll("\\+","-");

Ņemiet vērā arī to, ka kodā mēs saņemam md5 virkni nevis kā parasto hex, bet gan base64 kodējumā, kā arī iegūtajā md5 mēs veicam dīvainas slīpsvītras un plus rakstzīmju nomaiņas ar pasvītrām un domuzīmēm.

Un Java dod kanonisko bāzi64.

Saņemot atbildi no servera ar drošu md5 mūsu administratora panelī, mēs cenšamies iframe ielādēt šādu URL:

highlighter.indexisto.com/?md5=Dr4u2Yeb3NrBQLgyDAFrHg==&url=http%3A%2F%2Fhabrahabr.ru&expires=1389791582

Tagad mēs konfigurējam nginx HttpSecureLinkModule moduli. Šis modulis pārbauda visu tajā nonākušo parametru md5 (modulī ir reģistrēta tā pati slepenā atslēga kā admin servletā), pārbauda, ​​vai saite ir parsēta, un tikai šajā gadījumā pārsūta pieprasījumu uz mūsu starpniekservera servletu. .

Tagad neviens nevar izmantot mūsu starpniekserveri ārpus administratora paneļa, kā arī nevar nekur ievietot mūsu serverim pieprasīto attēlu - tas tik un tā pēc stundas mirs.

Tas ir viss, cilvēki, protams, ar savu marķiera rīku, lai skaidri identificētu elementu, ir jāatzīmē viens un tas pats elements (piemēram, raksta nosaukums) vairākās viena veida lapās. ka jūs varat precīzāk izveidot xpath un atmest dažādus ID, piemēram, "post-2334", kas acīmredzot darbosies tikai vienā lapā. Mūsu administrācijas panelī xpath ir jālabo manuāli, lai iegūtu pieņemamu rezultātu.

Elements

Vecajos sliktajos tīmekļa dizaina laikos bija daudz elementu, kas sabojāja katra izstrādātāja dzīvi. Gandrīz vienmēr tie bija slikta dizaina pieeja. Par laimi šis elements ir novecojis HTML5. Bet vai "iekļauts rāmis" joprojām ir pieejams. Vai nākamajā versijā tā tiks pārtraukta? Varbūt mums vajadzētu no tā izvairīties? Veidojot HTML lapu, šim elementam ir vairāki derīgi lietojumi. Bet jums ir jāsaprot, kas tas ir un kā tas darbojas, lai izvairītos no kļūdām.

Abi šie elementi ļauj izveidot atsevišķu HTML dokumentu. Saite uz dokumenta saturu, uz kuru atsaucas pašreizējā tīmekļa lapa, ir norādīta atribūtā src.

. . . . . .

Galvenā atšķirība starp un ir tā, ka tiek īstenots noteikums, ka HTML dokumentam ir prioritāte. Saturs tiek parādīts elementā, kas ir pašreizējā dokumenta daļa. Kā piemēru ņemiet vērā šo iegulto videoklipu, kas ņemts no YouTube:

Videoklips ir skaidri redzams HTML lapā, nevis atsevišķā panelī. elements lauza šo paradigmu un ļāva dokumentam kontrolēt pārlūkprogrammas logu, sadalot to vairākos mazos paneļos (rāmjos), no kuriem katrs parāda atsevišķu dokumentu. Visas pārējās atšķirības starp šo pamata atšķirību un izriet no tās.

Kādu dienu jūs, iespējams, saskarsities ar uzdevumu atjaunināt vecu vietni, kas tika izveidota, izmantojot rāmjus. Varat arī izmantot fiksēta platuma izkārtojumu, lai atjaunotu to pašu neatkarīgo paneļu un sliekšņu murgu. Bet jūs nevarēsit izmantot mērķa atribūtu, lai atvērtu saiti atsevišķā rāmī. Varat sākt meklēt JavaScript risinājumus. Lūdzu, nedariet to.

Ir vairāki derīgi lietošanas gadījumi HTML izveide lapas:

• trešās puses multivides satura iegulšana;
• sava multivides satura iegulšana, izmantojot starpplatformu dokumentu;
• iegulšanas kodu piemēri;
• trešo pušu sīklietotņu iegulšana kā maksājumu veidi.

Šeit ir daži šausmīgi lietošanas gadījumi:

• Fotogalerija;
• forums vai tērzēšana.

Ja vēlaties pašreizējā dokumentā iegult neatkarīgus, jau esošus HTML dokumentus, izmantojiet . Ja veidojat visu no nulles, nav iemesla sadalīt lapas dizainu vairākos atsevišķos dokumentos. It īpaši, ja tie faktiski nav neatkarīgi satura gabali.

Šī publikācija ir raksta “” tulkojums, ko sagatavojusi draudzīgā projekta komanda