Matu Matu - 1 month ago 5
Javascript Question

Changing content on a page using javascript via a url string

I'm a designer not a JS coder so any help would be great on this.

Using javascript or jquery how would I replace content on a page via a string in the url?

So if content 'A' is just the normal content via this

http://www.example.com
and if 'A' is replaced by content 'B' via this
http://www.example.com/index.html?content=b
.

example:

content A

<div id="video-player">
vimeo code
</div>


to be replaced with content B

<div id="video-player">
youtube code
</div>


via a string in the url like so http://www.example.com/index.html?player=youtube
if there is no string in the url then it will default and just show the vimeo code

edit

ok this is what is on my html page now



<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="js/test.js"></script>
</head>

<body>

<div id="video-player">
vimeo
</div>

</body>
</html>


and in js page

window.location.href.split('?')[1].split('&')[0].split('content=')[1]
var content_value = window.location.hash.substring(1) // For hashses OR
var content_value = window.location.href.split('?')[1].split('&')[0].split('content=')[1] // For ?
if (content_value === "b") {
$('#video-player').html(vimeo_code);
} else {
$('#video-player').html(youtube_code);


is that right?

Answer

The easiest wat to do this would be to use a hash tag. You could use a ? but it is harder to implement. So instead of index.html?content=b use index.html#b and then you can reference to that by using window.location.hash.substring(1) which would give you b in your scenario. Then you can use an if statement to check this value and adjust the content accordingly.

Alternatively, if you need to use ? then you can use this window.location.href.split('?')[1].split('content=')[1] but it is not guaranteed to work in every situation, especially if you have more than one variable there. For multiple variables you would use

window.location.href.split('?')[1].split('&')[0].split('content=')[1]

Your complete code will now look like this:

$(function () {
  var youtube_code, vimeo_code, content_value;
  youtube_code = "The code for Youtube goes here";
  vimeo_code = "The code for Vimeo goes here";
  content_value = (typeof window.location.href.split('player=')[1] !== "undefined") ? window.location.href.split('player=')[1] : "";

  if (content_value === "youtube") {
    $('#video-player').html(youtube_code);
  } else {
    $('#video-player').html(vimeo_code);
  }
});

You could also use some else ifs if you wanted more content options. Use one of the top two lines depending on what option you chose.

EDIT: changed code to the complete code (and optimised a bit). You do not need to add anything else to this apart from changing the youtube_code and vimeo_code to the correct values.

EDIT: optimised and made it check if there is actually player= in the url.

Comments