使用javascript通过url字符串更改页面内容

Changing content on a page using javascript via a url string

本文关键字：javascript 通过 url 字符串 使用      更新时间：2023-09-26

我是一个设计师，而不是一个JS编码员，所以任何帮助将是伟大的。

使用javascript或jquery，我如何通过url中的字符串替换页面上的内容?

因此，如果内容'A'只是通过http://www.example.com的正常内容，并且如果'A'通过http://www.example.com/index.html?content=b被内容'B'取代。

的例子:内容

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

替换为内容B

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

通过url中的字符串，如http://www.example.com/index.html?player=youtube如果url中没有字符串，那么它将默认显示vimeo代码

编辑

好了，这就是我的HTML页面现在的内容

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

和js页面

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

对吗?

最简单的方法是使用散列标签。你可以使用?，但它很难实现。所以用index.html#b代替index.html?content=b，然后你可以用window.location.hash.substring(1)来参考它，在你的情况下会得到b。然后，您可以使用if语句来检查该值并相应地调整内容。

或者，如果您需要使用?，那么您可以使用这个window.location.href.split('?')[1].split('content=')[1]，但不能保证在每种情况下都能工作，特别是如果那里有多个变量。对于多个变量，可以使用 
window.location.href.split('?')[1].split('&')[0].split('content=')[1]

你的完整代码现在看起来像这样:

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

如果你想要更多的内容选项，你也可以使用一些else if s。根据你选择的选项使用最上面的两行之一。

EDIT:将代码更改为完整代码(并优化了一点)。除了将youtube_code和vimeo_code更改为正确的值之外，您不需要添加任何其他内容。

EDIT:优化并使其检查url中是否实际存在player=

建议您使用ajax和xml。将xml文件放在您的dropbox文件夹中，您可以随时编辑url。

如果用户选择了一个选项，ajax将在不刷新浏览器的情况下更新该值。

好的事情是你可以从你的手机更新url，而无需登录到html编辑器/网站cms，你也可以使用其他功能。

相关文章：