Länk-varning Javascript

Hej, har precis börjat lite med javascript, och har fått denna uppgiften:

När man klickar på en länk som leder utanför webbplatsen ska man bli varnad att man håller på att lämna sida och få upp en ruta som säger "Vill du verkligen lämna webbplatsen?" Där man kan välja "OK" för att gå vidare eller "Avbryt" och stanna kvar på webbplatsen.

Har fastnat, och vet inte ens om är på rätt väg? Så skulle behöva lite hjälp!

<ul>
  <li><a href="sida3.html" class="external">Inrikes</a></li>
  <li><a href="sida3.html" class="external">Utrikes</a></li> 
  <li><a href="sida3.html" class="external">Lokalt</a></li>
</ul>

Javascript

function leaving()
{ 
   var external = document.getElementsByTagName("p");
   external.onclick = external;
   alert("Vill du verkligen lämna webbplatsen?"); 
}

function init() 
{
  var external = document.getElementsByTagName("p");
  for(var i = 0; i < external.length ;i++) 
  {
    if(external[i].className = "external")
    {
      external[i].onclick = leaving;
    }
  }
}
window.onload = init;

Tack på förhand! :)

//Martina

I funktionen leaving, så är de två första raderna... fel. Helt fel. För den tredje raden bör du använda confirm, som visar en ruta med ok/avbryt och ger tillbaka true eller false beroende på användarens val. Sedan kan du använda return för att skicka svaret vidare till webbläsaren. (Du skulle även kunna skriva return false; för att alltid blockera klicket.)

I funktionen init har du skrivit p istället för a. Alltså hämtas inte länkar, utan p-taggar, dvs textstycken. (p står för paragraph på engelska.)

Så i slutändan ser fungerande kod ut så här:

function leaving()
{
   return confirm("Vill du verkligen lämna webbplatsen?");
}

function init()
{
  var external = document.getElementsByTagName("a");
  for(var i = 0; i < external.length ;i++)
  {
    if(external[i].className = "external")
    {
      external[i].onclick = leaving;
    }
  }
}
window.onload = init;

Oj självklart skulle det stå "a" och inte "p", slarvfel där haha :)
Tusen tack för hjälpen! :)

Kan man inte bara kolla efter http eller www istället för att sätta en class på varje extern länk? Inom domänen länkar man ju bara till själva sidan ju.

<ul>
  <li><a href="sida3.html">Inrikes</a></li>
  <li><a href="www.webforum.nu">Utrikes</a></li> 
</ul>

function leaving()
{
   return confirm("Vill du verkligen lämna webbplatsen?");
}

function init()
{
	  var links = document.getElementsByTagName("a");
	  for(var i = 0; i < links.length ;i++)
	  {
		if(links[i].href.indexOf(window.location.hostname) == -1)
		{
		  links[i].onclick = leaving;
		}
	  }
}
window.onload = init;

Ändra koden efter lite tillrättavisning från nitro, funkar på localhost också men inte direkt under C: eller annan disk benämning. Då får man lägga till en koll för det också.

stattin: För det första så gör inte din länk till wF det du förväntar dig eftersom du utelämnar http://. www.webforum.nu tolkas, precis som sida3.html, som en relativ URL, och alltså skulle du hamna på http://www.example.com/www.webforum.nu istället för http://www.webforum.nu. (Förutsatt att sidan som länken ligger på är http://www.example.com/) Vanligt misstag.
För det andra så får du inte ut det som står i href="..." när du läser ut attributet .href i Javascript, utan den fulla absoluta URL'en. Alltså, om vi tänker oss att sidan med länken ligger på http://www.example.com/ och länken har attributet href="sida3.html" så kommer .href i JS läsa http://www.example.com/sida3.html och alla länkar kommer att påverkas med din kod. Ett bättre test vore då att kolla efter ens eget domännamn och inte lägga till onclick för dessa länkar.

Du kan också kolla på window.location.hostname för att se om den stämmer överens med länkarna:

(function(){
	var isInternal = new RegExp('https?://'+ window.location.hostname, "g"),
		leaving = function() {
			return confirm("Vill du verkligen lämna webbplatsen?");
		},
		init = function() {
			var links = document.getElementsByTagName("a");
			for(var i = 0; i < links.length ;i++) {
				var link = links[i];
				if(!isInternal.test(link.href)) {
					link.onclick = leaving;
				}
			}
		};
	window.onload = init;
})();

för alla länkar innehåller http + www. koden ligger i en egen metod som körs direkt för att inte lägga ut variabler i det globala window objektet.

nitro2k01 skrev:

stattin: För det första så gör inte din länk till wF det du förväntar dig eftersom du utelämnar http://. https://www.webforum.nu tolkas, precis som sida3.html, som en relativ URL, och alltså skulle du hamna på http://www.example.com/www.webforum.nu istället för http://www.webforum.nu. (Förutsatt att sidan som länken ligger på är http://www.example.com/) Vanligt misstag.
För det andra så får du inte ut det som står i href="..." när du läser ut attributet .href i Javascript, utan den fulla absoluta URL'en. Alltså, om vi tänker oss att sidan med länken ligger på http://www.example.com/ och länken har attributet href="sida3.html" så kommer .href i JS läsa http://www.example.com/sida3.html och alla länkar kommer att påverkas med din kod. Ett bättre test vore då att kolla efter ens eget domännamn och inte lägga till onclick för dessa länkar.

Ja just ja :p

Men tanken var god och voigtann1 kom ju med en annan lösning eller så gör man som du sa kollar på domän namnet.. fast ska man test köra lokalt blir ju även det ett problem.

Jaja det vara bara ett tips men Miini vill som sagt kanske ha med sina klasser för något speciellt ändamål så vi kanske bara rör till det :).

Såg att i din if fråga har du bara ett = detta bör du inte ha om det är för att du skall jämföra värden, för just nu sätter du värden till className alltid

Just fan. Det missade jag helt! (Jag bara kopierade TS' kod och testade inte min ändring fullt ut.)