Przejdź do treści

Ramki

Ostrzeżenie przed ramką

Surfując w Internecie, często zdarza się, że odnajdujemy stronę, która wygląda jakoś dziwnie: nie posiada żadnego menu ani spisu treści, w którym można wybrać interesujący nas temat i swobodnie nawigować w całym serwisie. Strona taka jest jakby wyrwana z szerszej całości, ponieważ prawdopodobnie wchodzi w skład struktury ramek, lecz użytkownik wczytał ją bezpośrednio, a nie przez stronę startową. Dzieje się tak dlatego, ponieważ wyszukiwarki sieciowe indeksują wszystkie strony, bez względu czy wchodzą one w skład ramek czy nie. Aby zapobiec takim sytuacjom, można na każdej stronie, która ma zostać wyświetlona w ramkach (oprócz startowej), wstawić bezpośrednio po znaczniku otwierającym BODY [zobacz: Ramy dokumentu] następujący kod:

<script type="text/javascript">
// <![CDATA[
if (self == parent) document.write('<div align="center"><b>UWAGA!</b> To jest tylko ramka - wróć do <a href="index.html"><b>STRONY&nbsp;GŁÓWNEJ</b></a></div><hr /><br /><br />');
// ]]>
</script>
gdzie w miejsce tekstu "index.html" należy podać lokalizację na dysku, gdzie znajduje się strona startowa struktury ramek.

W efekcie, jeśli strona zostanie wczytana poza ramkami, na ekranie zostanie wyświetlony tekst z odsyłaczem: "UWAGA! To jest tylko ramka - wróć do STRONY GŁÓWNEJ", po kliknięciu którego, nastąpi przejście do strony głównej (startowej). W przypadku poprawnego załadowania strony, na ekranie nie pojawi się żaden tekst.

Przykład:

Przykład


Możliwe jest również automatyczne przekierowanie użytkownika od razu do strony głównej, jeśli tylko wczyta podstronę serwisu poza ramkami. Aby to zrobić, w treści nagłówkowej podstron (w ramach HEAD) należy wkleić następujący kod:

<script type="text/javascript">
// <![CDATA[
if (self == parent) location.href = "index.html";
// ]]>
</SCRIPT>

Sposób ten jest najbardziej przydatny na podstronach, które są wczytywane do ramek na starcie, tzn. dla tych, które są wpisane na stronie startowej ramek w atrybutach src="...".

Przykład:

Przykład (ładujemy "Spis treści" poza ramkami)


Ostatni sposób może nie być wygodny, jeśli użytkownik odnajdzie dowolną podstronę naszego serwisu w wyszukiwarce sieciowej. W takim przypadku nastąpiłoby natychmiastowe przejście do strony głównej i wczytanie podstron startowych. Użytkownik straciłby z oczu treść, której szukał, a odnalezienie jej w spisie treści nie zawsze jest łatwe, co mogłoby poskutkować zniechęceniem do serwisu. Aby temu zapobiec, na podstronach które nie są ładowane na starcie, nie powinniśmy używać poprzedniego skryptu, ale raczej pierwszy. Może nam jednak nie odpowiadać, że czytelnicy zobaczą naszą stronę bez pełnego menu, co popsuje całą jej budowę. Aby do tego nie dopuścić, można wykorzystać następujący skrypt (trzeba go wstawić w treści nagłówkowej podstron, czyli w ramach HEAD):

<script type="text/javascript">
// <![CDATA[
if (parent == self)
{
	var url = escape(location.href);
	for (var i = 0, str = ''; i < url.length; i++)
	{
		if (url.charAt(i) == '/') str += '%2F';
		else str += url.charAt(i);
	}
	window.location.href = 'index1.html?' + str;
}
// ]]>
</script>

Następnie tworzymy dokument index1.html (w tym samym katalogu co index.html) w następujący sposób:

<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<title>Tytuł strony</title>
</head>
<script type="text/javascript">
// <![CDATA[
// www.kurshtml.edu.pl

var url = unescape(location.search.substring(1));
if (url.indexOf(location.href.substring(0, location.href.indexOf('index1.html'))) != 0) url = '';
document.write(
'<frameset cols="180,*" border="0" frameborder="0" framespacing="0">' +
'<frame name="spis" noresize frameborder="0" src="spis.html" />' +
'<frame name="strona" noresize frameborder="0" src="' + (url ? url : 'start.html') + '" />' +
'<frame name="strona" src="' + (url ? url : 'start.html') + '" />' +
'<noframes><body><a href="spis.html">Spis treści</a></body></noframes>' +
'</frameset>'
);
// ]]>
</script>
<noscript>
<frameset cols="180,*" border="0" frameborder="0" framespacing="0">
<frame name="spis" noresize frameborder="0" src="spis.html" />
<frame name="strona" noresize frameborder="0" src="start.html" />
<noframes><body><a href="spis.html">Spis treści</a></body></noframes>
</frameset>
</noscript>
</html>

Budowa tego dokumentu jest specyficzna:

  1. Na początek kopiujemy do niego całą zawartość oryginalnego pliku index.html, czyli właściwej strony startowej ramek.
  2. Następnie wszystkie znaczniki tworzące strukturę ramek - czyli zewnętrzne <frameset>...</frameset> - obejmujemy znacznikami <noscript>...</noscript>.
  3. Dalej, bezpośrednio przed wstawionym znacznikiem <noscript>, dodajemy taki kod:
    <script type="text/javascript">
    // <![CDATA[
    // www.kurshtml.edu.pl
    var url = unescape(location.search.substring(1)); if (url.indexOf(location.href.substring(0, location.href.indexOf('index1.html'))) != 0) url = ''; document.write( Tutaj będzie struktura ramek ); // ]]> </script>
  4. we wklejonym kodzie, w miejsce tekstu "tutaj będzie struktura ramek" należy skopiować i wkleić to, co umieściliśmy wcześniej wewnątrz znaczników <noscript>...</noscript>, czyli: <frameset>...</frameset>, <frame />, <noframes>...</noframes>.
  5. Teraz należy zmienić tekst wklejony poprzednio w ten sposób, że obejmujemy wszystkie jego linie w apostrofy ( ' ), a ponadto na końcu każdej z nich (oprócz ostatniej!) stawiamy znak plus: "+".
  6. Na koniec, odnajdujemy znacznik <frame />, do którego są wczytywane podstrony ze zmieniającą się treścią, tzn. tam gdzie ładują się strony po kliknięciu odnośników z ramki spisu treści. Zastępujemy w nim atrybut src="..." na src="' + (url ? url : 'start.html') + '" gdzie zamiast "start.html" wpisujemy poprzednią wartość tego atrybutu, czyli lokalizację strony, która normalnie wczytuje się do tej ramki na starcie.

Jeśli nadal nie umiesz wstawić tego skryptu na swoją stronę, tutaj znajdziesz generator, który zrobi to całkowicie automatycznie.


Aby niepotrzebnie nie powiększać rozmiaru stron serwisu, we wszystkich wariantach skryptu przedstawionych tutaj można kod do wstawienia na podstrony zapisać w pliku z rozszerzeniem *.js (w ostatnim wariancie będzie to tylko pierwsza część kodu). Trzeba wtedy jedynie pamiętać, aby usunąć z niego dwie pierwsze i dwie ostatnie linijki! Następnie na podstronach zamiast poprzednio podanego kodu wystarczy wstawić:

<script type="text/javascript" src="autoframeset.js"></script>
gdzie "autoframeset.js", to lokalizacja stworzonego właśnie pliku.

Zobacz także

Komentarze

Zobacz więcej komentarzy