jquery load() method

A load() metódussal egy adott oldal meghatározott területére, tetszőleges számú oldal tartalmát lekérhetjük.
Alkalmazása akkor hasznos, ha sok, információs oldalunk vagy táblázatunk is van, UTF-8 BOM kódolással.
Ekkor nem kell oldalról-oldalra navigálni, button gombok elhelyezésével egy adott oldalra bármelyik témakört lekérdezhetjük.
Oldal frissítésekor, minden visszaáll alapállapotra.

load() metódus.        Sikeres lekérdezés esetén, visszatér az URL útvonallal meghatározott fájl, tartalmával.
                                  Nem sikeres lekérdezésnél, választ sem kapunk, mért nem jelent meg, lekérdezett.

Hasonlit az IFRAME meghatározáshoz: Mellyel egy adott oldalon, másik oldal tartalmát jelenítjük meg.
            Az IFRAME ablakkal megjelenített oldalak, betöltődnek teljes tartalmukkal, beleértve a fotókat akkor is,
            ha azoknak, nem globális elérési útvonal van meghatározva.

Load() metódus lekérdezési hátránya, a link vagy az IFRAME lekéréssel szemben:

- Felhasználni szerveren lehet, mely lehet bérelt tárhelyen, vagy a saját számítógépünkre telepített APACHE szerveren.
- Lekérdezett oldal kódolásának UTF-8 BOM vagy UTF-8-nak kell lennie, ellemkező esetben ékezetes karaktereket, nem jeleníti meg.
- Ha fontos: Lekérdezett oldalon, a hivatkozási linkeknek és a fotóknak is, globális elérési útvonalat kell meghatározni.
       Nem globális útvonalat határozunk meg:   Például csak így:  src="../foto.jpg"    A fotók nem jelennek meg a hívó oldalon,
       és a linkek sem az eredetileg meghatározott címre navigálnak, mert az útvonal megváltozik.

Előnye:
Egy adott oldal meghatározott területére, gyorsan és navigálás nélkül. tetszőleges számú oldal tartalmát lekérhetjük.

Meghívott oldalak, megjelenési tesztelése.

Gyakorláshoz:
Ezeket az oldalakat hívjuk meg load() metódussal és linkekkel, majd IFRAME ablakba.

Hozzunk létre egy "mintak" nevű mappát, melybe elhelyezzük a hivható fájlokat, a következő elnevezésekkel.
- hivhato.html -------------- ( Ez, ANSI vagy Karakterkódolással íródjon.)
- hivhato_kodolt.html ----- ( Ez, ANSI vagy Karakterkódolással, de az ékezetes karaktereket, ASCII kódolt formátumban írjuk meg.)
- hivhato_utf8.html -------- ( Fájl kódolása UTF-8 BOM vagy UTF-8 legyen.)
- szoveg.txt ----------------- ( ANSI kódolású, TXT (Jegyzettömbben.) írjuk meg.)
- szovegutf8.txt ------------ ( UTF-8 BOM kódolású, TXT (Jegyzettömbben.) írjuk meg.)
- szoveg.docx -------------- ( Ezt, Word szövegszerkesztőben írjuk meg.)

Itt egy segéd. Ékezetes karakterek, ASCII kódra.

Elsőként load meghatározásokkal kérdezzük le, melyekhez tartozik egy link is.
- Button gombokra kattintva, a load() lekérési eredményt tesztelhetjük.
- A linkekre kattintva, eredeti megjelenést tesztelhetjük. Ekkor ide visszatéréshez. a böngészőablak vissza ikinjára kell kattintani.

Másodikként IFRAME ablakban kérdezzük le, fenti oldalak tartalmát.
- IFRAME lekérdezéseket, a load lekérdezések után láthatjuk, és tesztelhetjük.

Megjelenítés, load() metódussal!

A sárga színnel jelőltre kattintáskor, Word fájl olvasható formátumban letőltődik szamítógépünk "letöltések" mappájába, melyből törölhetjük.
Az aqua (cián) színnel jelőltekre kattintáskor, megjelenik lekért oldal, de az ékezetes betűkkel gond lehet.
Ezeket tesztelni saját számítógépünkön elhelyezett lod() kéréssel tesztelhetjük. Ekkor fogjuk tapasztalni, hogy külső tárhelyről történő kérésnél, nem történik semmi. De az alattuk lévő linkkel, bárhonnan rákereshetünk az oldalakra.

Következő gombokra kattintással tesztelhetjük, miért kell load() kéréshez, UTF-8 BOM kódolású fájl.

A load() lekérések, itt jelennek meg!

Leírás.
Megjelenítés load() metódussal.

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
    #kijeloltTerulet{width: 100%;  border: 2px solid red;}
    #url {width: 100%; min-height: 300px; margin-top: 20px;  border: 2px solid red; background-color:white;}
</style>

<script>
$(document).ready(function() {
  // ---------- ANSI vagy Karakterkodolású, oldal meghívása. -------------------------------------------------
	$("#tema01").click( function(event) { $('#url').load('mintak/hivhato.html'); } );
	
  // ------  ANSI vagy Karakterkodolású, de ékezetes karaktarek ASCII-re kódolva, oldal meghívása. ---------------------
	$("#tema02").click( function(event) { $('#url').load('mintak/hivhato_kodolt.html'); } );
	
  // ---------- UTF-8 BOM kódolással, oldal meghívása. -------------------------------------------------
	$("#tema03").click( function(event) { $('#url').load('mintak/hivhato_utf8.html'); } );
	
  // ---------- ANSI kódolású TXT (Jegyzettömb) oldal meghívása. -------------------------------------------------
	$("#tema04").click( function(event) { $('#url').load('mintak/szoveg.txt'); } );
	
  // ---------- UTF-8 BOM kódolású TXT (Jegyzettömb) oldal meghívása. -------------------------------------------------
	$("#tema05").click( function(event) { $('#url').load('mintak/szovegutf8.txt'); } );
	
  // ---------- Word szövegszerkesztő, oldal meghívása. -------------------------------------------------
	$("#tema06").click( function(event) { $('#url').load('mintak/szoveg.docx'); } );
	

  // ----  Globális meghívás.  Otthoni számítógépről, bérelt tárhelyen lévő html fájl meghívása.   -------------------------------------------------
	$("#btnglob").click( function(event) { $('#url').load('https://wpaulina.hu/asztali/cd_tartalom/szovegformazas/formazas.html'); } );  
	
  // --- Otthoni számítógép szerverén, (Localhostról) másik mappában lévő fájl meghívása.-------------------
	$("#btnlocal").click( function(event) { $('#url').load('../../cd_tartalom/szovegformazas/formazas.html'); } );
	
	
  // ---------  Load metódussal mejelenített tartalom törlése. -----------------------------------------
		$(".of5").click( function() { window.location.reload(); } );	
	 
});
</script>
</head>

<body>
	
<p> Megjelenítés, load() metódussal! </p> 

	<button class="of5"> Button gombbal lekérdezett törlése. Kattints ide! </button>
	<button id="tema01"> ANSI vagy Karakterkódolású oldal! Kattints ide! </button>
	<button id="tema02"> ANSI vagy Karakterkódolású, de ékezetes betűk, ASCII-re kódolva! Kattints ide! </button>
	<button id="tema03"> UTF-8 kódolású html oldal! Kattints ide! </button>
	<button id="tema04"> ANSI kódolású TXT (jegyzettömb) oldal! Kattints ide! </button>
	<button id="tema05"> UTF-8 BOM kódolású TXT (jegyzettömb) oldal! Kattints ide! </button>
	<button id="tema06"> Word szövegszerkesztő oldal! Kattints ide! </button>

	<div id="url"></div>

</body>

Iframe ablakban történő megjelenések, tesztelése!

Leírás. Megjelenítés, iframe ablakban!

<head>
<meta charset="UTF-8">
<title>jquery load()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
$(document).ready(function() {
  // -----------Iframe ablakok felfedése, button gombra kattintást követően. ------------------------------- 
	$("#btnifr1").click( function(event) {iframetorles();  $("#iframe01").css("display", "block");	 });
	$("#btnifr2").click( function(event) {iframetorles();  $("#iframe02").css("display", "block");  });
	$("#btnifr3").click( function(event) {iframetorles();  $("#iframe03").css("display", "block");  });
	$("#btnifr4").click( function(event) {iframetorles();  $("#iframe04").css("display", "block");  });
	$("#btnifr5").click( function(event) {iframetorles();  $("#iframe05").css("display", "block");  });
	$("#btnifr6").click( function(event) {iframetorles();  $("#iframe06").css("display", "block");  });
});

function iframetorles(){
     document.getElementById('iframe01').style.display="none";
     document.getElementById('iframe02').style.display="none";
     document.getElementById('iframe03').style.display="none";
     document.getElementById('iframe04').style.display="none";
     document.getElementById('iframe05').style.display="none";
     document.getElementById('iframe06').style.display="none";
}
</script>

<style>
.bemutatoter{width:99%; min-height:580px; padding-left:5px; border:2px solid red;}
#iframe01,#iframe02,#iframe03,#iframe04,#iframe05,#iframe06{display:none;}
</style>
</head>

</body>
<div class="bemutatoter">
     	<iframe id="iframe01"  src="../mintak/hivhato.html" frameborder="0" width="930" height="470"></iframe>
     	<iframe id="iframe02"  src="../mintak/hivhato_kodolt.html" frameborder="0" width="930" height="470"></iframe>
     	<iframe id="iframe03"  src="../mintak/hivhato_utf8.html" frameborder="0" width="930" height="470"></iframe>
     	<iframe id="iframe04"  src="../mintak/szoveg.txt" frameborder="0" width="930" height="470"></iframe>
     	<iframe id="iframe05"  src="../mintak/szovegutf8.txt" frameborder="0" width="930" height="470"></iframe>
     	<iframe id="iframe06"  src="https://wpaulina.hu/asztali/cd_tartalom/szovegformazas/formazas.html" frameborder="0" 
		width="930" height="470"></iframe>
</div>
</body>

Az Iframe lekéréshez, kattintsunk valamelyik button gombra!

Fenti példák Iframe lekérése, itt jelenik meg!

HTML oldal mindegy milyen kódolású, olvasható formátumban jelenik meg.
TXT fájloknak kell UTF-8 BOM kódolás, hogy olvashatók legyenek.

Teszteléshez kódolt fájl tartalma, így néz ki.
(Az ékezetes karakterek vannak, ASCII kóddal megírva.)

<body>
<div id="meghivott">

<h2>load() met&#243;dus. &#233;s &lt;iframe&gt; &#246;sszehasonl&#237;t&#225;sa.</h2>
<p>Ez egy teszt oldal, melyet meghívunk load() met&#243;dussal, &#233;s iframe ablakban is. <br /> 
<b><u>Tartalmaz:</u></b><br /> 
- Kett&#337; hivatkoz&#225;si linket. Egyet sz&#246;vegformátumban, &#233;s egyet k&#233;pform&#225;tumban (Z&#246;ld ny&#237;l.)<br /> 
- Egy teszt fot&#243;t. (Kutya fot&#243;j&#225;t.)<br /> 
- Valamint, &#233;kezetes karaktereket is. </p>
<p><a href="../jquery-load.html"> Hivatkoz&#225;si link, mely a t&#233;mak&#246;r&#246;kh&#246;z visz!</a></p>
<p>
<a href="../jquery-load.html">
<img src="foto01.jpg" alt="Hivatkoz&#225;si link, mely a t&#233;makör&#246;kh&#246;z visz!" width="42" height="42" border="0"/>
</a>
<img src="fotok02.jpg" alt=" Ez egy teszt fot&#243;" width="50" height="50" border="0"/></p>
<p>
<b><u>iframe:</u></b> Dokumentumot eredeti form&#225;tum&#225;ban jelen&#237;ti meg.<br />
<b><u>load() met&#243;dus:</u></b><br />
-  Hivatkozásoknak &#233;s fot&#243;knak a megh&#237;vott oldalon, glob&#225;lis el&#233;rési URL címet kell meghat&#225;rozni.<br />
-  &#201;kezetes karaktereket, ASCII k&#243;dol&#225;ssal ismeri.
</p>

</div>
</body>