Parameter aus URL auslesen mit jQuery

Bei der Entwicklung meines Photoblog-Themes für WordPress habe ich nun auf jQuery umgestellt. WordPress hat das Framework ja implementiert und die Ladezeiten für das Framework sind doch recht beträchtlich klein im Verhältnis zu anderen Bibliotheken. Dabei möchte ich aber gern aufgrund des #comment-Ankers, denn man bekommt, sobald man einen Kommentar ausgegeben hat, auslesen. Denn dann, soll der Bereich des Kommentars nicht ausgeblenedet werden (hide oder toogle). Um Parameter, also auch Anker aus der URL auszulesen kann man ebenfalls jQuery nutzen, eine kleines Plugin getURLParam (1K) sorgt dafür. Leicht zu implementieren und zu nutzen. Mit PHP kann man das nicht so einfach und so ist es eine saubere Lösung.

jQueryBei der Entwicklung meines Photoblog-Themes für WordPress habe ich nun auf jQuery umgestellt. WordPress hat das Framework ja implementiert und die Ladezeiten für das Framework sind doch recht beträchtlich klein im Verhältnis zu anderen Bibliotheken.

Dabei möchte ich aber gern aufgrund des #comment-Ankers, denn man bekommt, sobald man einen Kommentar ausgegeben hat, auslesen. Denn dann, soll der Bereich des Kommentars nicht ausgeblenedet werden (hide oder toogle). Um Parameter, also auch Anker aus der URL auszulesen kann man ebenfalls jQuery nutzen, eine kleines Plugin getURLParam (1K) sorgt dafür. Leicht zu implementieren und zu nutzen. Mit PHP kann man das nicht so einfach und so ist es eine saubere Lösung.

Das Plugin im head-Bereich des Themes (header.php) einbinden.


<script src="<?php bloginfo('url'); ?>/wp-content/themes/PhotoBlogFB/jquery.getParams.js" type="text/javascript" charset="<?php bloginfo('charset'); ?>" ></script>

Der JS-Code könnte dann folgendermaßen aussehen:


	<script type="text/javascript">
	<!--
		$(document).ready(function() {
			if ($.getURLParam("comment") != null) {
				$("ol").hide();
			}
		});
	-->
	</script>

Will man lediglich die URL auslesen, um festzustellen, ob es sich um einen Anker handelt, dann ist das mit wenigen Zeilen JavaScript zu machen.


var myurl = document.URL;
var mysearch = myurl.search(/#comment/);

if(mysearch == -1) {
	$("ol").hide();
}

Alternativ kann man die URL folgendermaßen auslesen, ohne jQuery und Regex (gefunden in diesem Artikel):


var a, url = 'http://example.org/';
a = document.createElement( 'a' );
a.href = url;

console.log(a.protocol); // "http:"
console.log(a.hostname); // "example.org"
console.log(a.pathname); // "/"

5 Kommentare

  1. Danke für dein Tutorial. Wann gibt es endlich das Theme 😛 Bin mal gespannt, wie du es gemacht hast. Hab mir mal andere angeguckt und finde die nicht so toll.

    Gruß

Kommentare sind geschlossen.