Anchor links in combinatie met base links

zondag 22 maart 2015 17:20

Acties:

0 Henk 'm!

Soultaker

Topicstarter

De situatie

Ik heb een HTML document met een inhoudsopgave en een aantal items. Kort voorbeeld:

HTML:

<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:

<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?

maandag 23 maart 2015 10:52

Acties:

0 Henk 'm!

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'

maandag 23 maart 2015 11:45

Acties:

0 Henk 'm!

Soultaker

Topicstarter

Janoz schreef op maandag 23 maart 2015 @ 10:52:
Mag Javascript?

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.)

dinsdag 24 maart 2015 10:54

Acties:

0 Henk 'm!

Mebus

Zojuist wat geprobeerd:

HTML:

<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

[ Voor 5% gewijzigd door Mebus op 24-03-2015 10:55 ]

BABYMETAL LoL - Twitch

dinsdag 24 maart 2015 12:28

Acties:

0 Henk 'm!

Shivs

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.

[ Voor 6% gewijzigd door Shivs op 24-03-2015 12:45 . Reden: Typfouten ]

dinsdag 24 maart 2015 13:24

Acties:

0 Henk 'm!

Mebus

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

dinsdag 24 maart 2015 13:28

Acties:

0 Henk 'm!

Barryvdh

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:

$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();

woensdag 25 maart 2015 10:33

Acties:

0 Henk 'm!

Soultaker

Topicstarter

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.

Onderwerpen

De situatie

Het probleem

De vraag