Изменение содержимого на странице с использованием JavaScript с помощью строки URL - PullRequest
Новая
       3

Изменение содержимого на странице с использованием JavaScript с помощью строки URL

0 голосов
/ 21 июля 2011

Я дизайнер, а не JS-кодер, поэтому любая помощь будет полезна для этого.

Используя javascript или jquery, как бы я заменил контент на странице через строку в URL?

Таким образом, если содержимое «A» является просто обычным содержимым через этот http://www.example.com и если «A» заменяется содержимым «B» через этот http://www.example.com/index.html?content=b.

пример:

содержимое A 

<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

edit

хорошо, это то, что сейчас на моей 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);

это верно?

Ответы [ 2 ]

1 голос
/ 21 июля 2011

Самый простой способ сделать это - использовать хеш-тег. Вы можете использовать ?, но это сложнее реализовать. Поэтому вместо index.html?content=b используйте index.html#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 на правильные значения.

РЕДАКТИРОВАТЬ : оптимизирован и заставил его проверить, действительно ли в URL есть player=.

0 голосов
/ 15 октября 2016

Я предлагаю вам использовать ajax и xml.Поместите XML-файлы в папку Dropbox, где вы можете редактировать URL в любое время.

Ajax обновит значение без обновления браузера, если пользователь выберет опцию.

Хорошо, что вы можете обновить URL-адрес со своего мобильного телефона без входа в HTML-редактор / веб-сайт cmsи вы можете использовать другие функции, а также.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...