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?
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.
I suggest you to use ajax and xml. Put xml files in your dropbox folder where you can edit the url at any time.
The ajax will update the value without refresh the browser if user select an option.
Good things is you are able to update the url from your mobile phone without login to html editor / website cms and you can use other feature as well.
加载中,请稍侯......
精彩评论