Menu

31 maart 2011

Safari: De inhoud van een webpagina aanpassen

Met behulp van het optionele ‘ontwikkel’ menu in Safari is het mogelijk om een aantal interessante opties te activeren zoals webinfo, foutconsole, snippereditor en extensiebouwer. Naast al deze vrij technische functies kun je er ook een leuk trucje mee uitvoeren, zoals bijvoorbeeld de tekstinhoud van een webpagina wijzigen.

Activeer allereerst het ontwikkel menu via de voorkeuren van de Safari:

Safari ▸ Voorkeuren ▸ Geavanceerd ▸ Ontwikkel-menu in menubalk tonen

Open een webpagina en selecteer de menu optie Ontwikkel ▸ Toon webinfovenster, activeer de optie ‘Elementen’ linksboven in het venster.

Door nu met je muis te klikken op de verschillende elementen in het webinfovenster wordt het bijbehorende element gemarkeerd op de website. Door te dubbelklikken op een element kun je ‘on the fly’ inhoud van de webpagina wijzigen. Dit geeft je de mogelijkheid om hele leuke screenshots van websites te maken met daarin bijvoorbeeld je eigen naam.

Een andere optie om een website te bewerken is met behulp van de foutconsole deze activeer je via het menu: Safari ▸ Ontwikkel ▸ Toon foutconsole. Type in foutconsole het onderstaande commando:

document.body.contentEditable = true

Wanneer je op de tekst in een webpagina klikt kun je de tekst aanpassen. Deze edit functie kun je weer uitschakelen met het commando:

document.body.contentEditable = false

Marcel bedankt voor de tip!




Gerelateerde tips:




Reacties


  • Justin Scheggetman 31 maart 2011 om 9:09

    Leuke voorbeeld afbeelding :) Altijd handig, kon ook worden uitgevoerd met een javascriptje in cross-browsers geloof ik.

  • Martijn Engler 31 maart 2011 om 14:24

    Gebruik de console zelf heel veel (krijg je als web developer…) en nooit bedacht dat het ook best grappig kan zijn voor non-nerds. ;)

    Leuke hoek ! :)

  • sredlums 31 maart 2011 om 15:08

    Leuk, maar dit kan echt véél simpeler!
    Kopieer en plak onderstaande code in de adresbalk, druk op enter, en aanpassen maar.
    Opslaan als bookmark en je hebt ‘m altijd bij de hand.
    Werkt ook op Windows en in andere browsers overigens.

    Idee voor toepassing:
    Open een website, pas deze aan met bovenstaande methode, en kies dan in het menu ‘Verstuur inhoud van pagina’ (of opslaan als webarchief).
    Op die manier kun je heel makkelijk een ‘aangepast’ nieuwsbericht van bijvoorbeeld nu.nl versturen zonder dat het de ontvanger opvalt (de kans dat ze het bericht ook online gaan bekijken is niet zo groot, omdat het hele bericht al in de mail staat.

    1 april ideetje? ;-)

  • sredlums 31 maart 2011 om 15:08

    Oh, oeps, en dan hier de code nog! :-S

    javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0

  • sredlums 31 maart 2011 om 15:11

    Hm, nog een laatste opmerking: nou net op deze website lijkt het niet te werken… :-(
    Maar op andere weer wel…

Een reactie toevoegen: