Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

Anchor links in combinatie met base links

Pagina: 1
Acties:

Onderwerpen


  • Soultaker
  • Registratie: september 2000
  • Laatst online: 18-11 20:19

De situatie

Ik heb een HTML document met een inhoudsopgave en een aantal items. Kort voorbeeld:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<body>
<h1>Inhoudsopgave</h1>
<ul>
<li><a href="#item1">Titel 1</a></li>
<li><a href="#item2">Titel 2</a></li>
...
</ul>
...
<a name="item1"></a>
<h2>Titel 1<h2>
<p>Content 1</p>
...
<a name="item2"></a>
<h2>Titel 2<h2>
<p>Content 2</p>
...
</body>
</html>

De links in de inhoudsopgave zijn interne anchor links, waar je op kunt klikken om naar het gewenste item te gaan. Dit werkt.

Nu is het zo dat de content van de items van een externe site komt, en soms relatieve links bevat. Gelukkig weet ik het adres van de site waar de content vandaag komt, dus dacht ik dit probleem op te kunnen lossen door simpelweg een <base href=".."> tag toe te voegen, zodat links ge´nterpreteerd worden relatief aan de oorspronkelijke URL. De HTML code ziet er dan bijvoorbeeld zo uit:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head><base href="http://example.com/"></head>
<body>
<h1>Inhoudsopgave</h1>
<ul>
<li><a href="#item1">Titel 1</a>
...
</ul>
...
<a name="item1"></a>
<h2>Titel 1<h2>
<img src="foo/bar.png">
...
</body>
</html>

Op deze manier wordt het plaatje onder Titel 1 geladen van http://example.com/foo/bar.png, zoals de bedoeling is. Ook dit werkt.

Het probleem

Probleem opgelost, zou je denken, behalve dat de anchor links uit de inhoudsopgave nu niet meer werken! Dat komt natuurlijk omdat een link naar #item1 dankzij de base link wordt ge´nterpreteerd als http://example.com/#item1 en die URL verwijst niet naar de huidige pagina.

Nu zou je denken: maak dan de links in de inhoudsopgave absoluut. Dat kan in dit geval echter niet, want het document is de HTML-content van een e-mailbericht, en heeft dus geen zelfstandige URL. Om dezelfde reden is het probleem ook niet met Javascript op te lossen (wat trouwens ook niet bijzonder elegant zou zijn), aangezien e-mail clients geen Javascript code in e-mailberichten uitvoeren.

De enige optie die ik nog kan verzinnen is het volledig parsen en herschrijven van de item content, waarbij relatieve naar absolute links omgeschreven worden, zodat ik de base-tag achterwege kan laten. Hier zie ik tegenop, omdat het lastig is om HTML correct te parsen.

De vraag

Hoe los ik dit op? Is er een manier om een base URL alleen toe te passen op een deel van het HTML document (bijvoorbeeld, alleen op de content onder een bepaalde div-tag)? Of is er een manier om binnen een document te linken zonder een absolute link te hoeven specificeren? Of weet iemand nog een andere manier om dit probleem op te lossen of te omzeilen?

PGP public key


  • Janoz
  • Registratie: oktober 2000
  • Laatst online: 11:44

Janoz

Moderator Devschuur«

!litemod

Mag Javascript? In dat geval zou je iets als
HTML:
1
<a href="#item1" onclick="document.getElementById('item1').scrollIntoView(); return false">Titel 1</a>

kunnen gebruiken. Desnoods kun je de eventhandler met javascript toekennen.

( http://stackoverflow.com/a/5581494/707693 )

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'


  • Soultaker
  • Registratie: september 2000
  • Laatst online: 18-11 20:19
quote:
Helaas niet, aangezien het om HTML content in een e-mailbericht gaat. Voor zover ik weet voeren e-mail clients geen JavaScript code uit. (Dit is ook de reden dat ik geen absolute link kan genereren, tenzij er een manier is om aan het huidige document te refereren die ik niet ken.)

PGP public key


  • Mebus
  • Registratie: september 2006
  • Laatst online: 12:07
Zojuist wat geprobeerd:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head><base href="http://ic.tweakimg.net/usericons/11775/"></head>
<body>
<h1>Inhoudsopgave</h1>
<ul>
<li><a href="javascript:;" onclick="document.location.hash='item1';">Titel 1</a>
</ul>
<a id="item1"></a>
<h2>Titel 1<h2>
<a href="SoulTaker.gif"><img src="SoulTaker.gif"></a>
</body>
</html>

Maar hotmail/gmail werkt al niet samen met de base tag (plaatje werkte niet, https://putsmail.com/ ). Als iemand dan toch een email doorstuurt naar zijn hotmail adres dan zal het niet meer goed werken. Denk dat de enigste oplossing is om absolute urls mee te geven :)

http://stackoverflow.com/...25/html-base-tag-in-email

Mebus wijzigde deze reactie 24-03-2015 10:55 (5%)

BABYMETAL LoL - Twitch


  • Shivs
  • Registratie: januari 2010
  • Niet online
Is het niet een idee om variabelen te definiŰren voor alle URL's die je parsed in de HTML op het moment dat je die genereerd? Bijvoorbeeld met JS of met PHP kan dit erg makkelijk worden gedaan.

Shivs wijzigde deze reactie 24-03-2015 12:45 (6%)
Reden: Typfouten


  • Mebus
  • Registratie: september 2006
  • Laatst online: 12:07
quote:
JelkeBart schreef op dinsdag 24 maart 2015 @ 12:28:
Is het niet een idee om variabelen te definiŰren voor alle URL's die je parsed in de HTML op het moment dat je die genereerd? Bijvoorbeeld met JS of met PHP kan dit erg makkelijk worden gedaan.
Dit wou die liever niet doen, maar PHP is wel de enigste optie nu denk, aangezien Javascript niet in html-emails werkt.

Zal hier vast wel een mooie PHP oplossing voor zijn :)

BABYMETAL LoL - Twitch


  • Barryvdh
  • Registratie: juni 2003
  • Laatst online: 20-11 14:10
Je kan ook een bestaande DOM Parser gebruiker om het jezelf wat makkelijker te maken als je toch de links wil herschrijven. Bijv. de Symfony DomCrawler:
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
$html = '<html><body><p>Hello World! <img src="foo/bar.png"></p></body></html>';
$baseHref = 'http://example.com/';

$crawler = new Symfony\Component\DomCrawler\Crawler();
$crawler->addContent($html);

/** @var  DOMElement $element*/
foreach ($crawler->filter('img') as $element) {
    $element->setAttribute('src', $baseHref . $element->getAttribute('src'));
}

$html = $crawler->html();


  • Soultaker
  • Registratie: september 2000
  • Laatst online: 18-11 20:19
Bedankt voor de tips. :) Als ik het zo samenvat dan lijkt het genereren van absolute links aan de server-kant toch de enige mogelijkheid.

De backend is overigens in Java geschreven, dus PHP of Javascript code zal 't niet worden, maar voor het principe maakt dat ook niet uit. Ik ben ge´nteresseerd in de meest eenvoudige/robuuste oplossing, het implementeren ervan daar kom ik wel uit.

PGP public key

Pagina: 1


Apple iPhone X Google Pixel 2 XL LG W7 Samsung Galaxy S8 Google Pixel 2 Sony Bravia A1 OLED Microsoft Xbox One X Apple iPhone 8

© 1998 - 2017 de Persgroep Online Services B.V. Tweakers vormt samen met o.a. Autotrack en Hardware.Info de Persgroep Online Services B.V. Hosting door True

*