Передача константы через javascript на html страницах(Я напишу 1000 раз "JS не Java")

@alanat · Регистрация: 16.07.2012

Студворк — интернет-сервис помощи студентам

Добрый день!

У меня есть две html-страницы: one.html и two.html

Страница one.html должна иметь ссылку в javascript на страницу two.html. При этом должны сохраняться следующие условия:
1. открываться страница должна в этом же окне
2. окну two.html должна передаваться константа со страницы one.html (не через поле ввода, а уже в ссылке заранее прописана), которая должна будет использоваться в javascript, находящейся на странице two.html

Как необходимо сделать ссылку на странице one.html, и что (и где) необходимо написать на странице two.html?

Прошу написать javascript код так, чтобы я его мог скопировать и вставить в html-страницу, т.к. если я увижу часть кода, то скорее всего не разберусь, что его должно окружать.

Заранее благодарен.

@basili4 · 08.10.2012, 13:47

JavaScript
1
2
3
<script>
    location.href="two.html?param=1";
</script>

на странице two.html

в массиве param будет GET запрос

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var tmp = new Array();      // два вспомагательных
var tmp2 = new Array();     // массива
var param = new Array();
 
var get = location.search;  // строка GET запроса
if(get != '') {
    tmp = (get.substr(1)).split('&');   // разделяем переменные
    for(var i=0; i < tmp.length; i++) {
        tmp2 = tmp[i].split('=');       // массив param будет содержать
        param[tmp2[0]] = tmp2[1];       // пары ключ(имя переменной)->значение
    }
    
}
</script>

@alanat · 08.10.2012, 15:04 **[ТС]**

Огромное спасибо

@Notortep · 08.10.2012, 20:50

раз требуется "открываться страница должна в этом же окне", то можно сделать:
-- без дополнительных символов в адресной строке (без query_string, или без get-запроса)
-- не дать возможности браузерно открыть в новом окне (через контекстное меню, через нажатие на колёсико мыши)
-- скрипт в файле two.html будет минимальным

в файле one.html
<a href="#" onclick="window.name = 'нужная_для_передачи_константа'; document.location.href = 'two.html'; return false">ссылка на two.html</a>

в файле two.html

JavaScript
1
2
3
<script>
var constanta = window.name; // в переменной будет та самая 'нужная_для_передачи_константа'
</script>

@alanat · 08.10.2012, 23:09 **[ТС]**

Спасибо. Очень удобно.

Добавлено через 1 час 17 минут
Notortep, я мало что понимаю в javascript, но в данном случае я так понял, что имени окна присваивается значение переменной, а потом считывается?

Может быть сможете помочь с продолжением (какой-то необъемный вариант, как сейчас)?
Цель передачи значения в другое окно следующая:
javascript, размещенный на второй странице должен подгрузить css-файл в зависимости от значения.
Например, передается значение "style2", тогда должен подгружаться style2.css, а если значение "style1", то подгрузится style1.css, а если "style3"...

Спасибо.

@Notortep · 09.10.2012, 06:27

самое простое - в файле two.html между <head> и </head> напишите сначала ссылки на все ваши css-файлы, но все их сделайте недоступными (disabled), и каждому дайте id, который равен имени css-файла (без расширения) - вот так:

HTML5
1
2
3
4
<link rel="StyleSheet" type="text/css" href="style1.css" id="style1" disabled />
<link rel="StyleSheet" type="text/css" href="style2.css" id="style2" disabled />
<link rel="StyleSheet" type="text/css" href="style3.css" id="style3" disabled />
<link rel="StyleSheet" type="text/css" href="style4.css" id="style4" disabled />

и только после всех этих подключений пропишите скриптовой блок

JavaScript
1
2
3
4
5
<script>
if (window.name.length && document.getElementById (window.name) != null)
   document.getElementById (window.name).disabled = false;
else document.getElementById ('style1').disabled = false;
</script>

в скриптовом блоке проверяется - имеется ли значение у имени окна
и проверяется - есть ли среди готовых к подключению стилей тот, который соответствует переданной константе
если все проверки прошли удачно - подключется именно тот файл, который и просили

если же вдруг на страницу two.html зашли не со страницы one.html и, значит, ничего не передали
или же если вдруг ошибочно передали константу типа "style987654321", файла для которой у вас нет и никогда не было, то подключается так называемый "стиль по умолчанию" - я в примере выбрал таковым style1
можете либо поменять имя этого файла на другое, если хотите другой файл по умолчанию,
либо вовсе всю последнюю строку (которая начинается со слова else) удалить, если по-умолчанию CSS вообще не нужен
-----

примечание: атрибут disabled для тега <LINK> является нестандартизированным - об этом честно предупреждают разработчики браузеров - https://developer.mozilla.org/... ement/link

мей би в каком-то из валидаторов это дело и не пройдёт проверку
но этот атрибут поддерживается всеми браузерами (включая MSIE), т.е. работать будет везде

@alanat · 09.10.2012, 09:56 **[ТС]**

Огромное спасибо! Реально фантастически простые решения, которые работают! Без громадных кодов, в которых тяжело разобраться.

На данный момент осталось 4 вопроса:

1. По аналогии с вашим кодом я сделал ручное переключение .css

HTML5
1
  <li onClick="document.getElementById ('style1').disabled = false; document.getElementById ('style2').disabled = true;" title="Стиль 1">Стиль 1</li>

Как сделать так, чтобы все остальные стили с id="style...", кроме id="style1", отключались? На странице есть еще другие стили, их отключать не надо. Необходимо будет перечислить все стили, которые необходимо будет отключить?

2. При переходе со страницы one.html на страницу two.html надо будет прописать window.name = 'style1'?
И на странице two.html в названии (как бы в <title>) будет написано "style1"?
А можно при заходе на страницу two.html со страницы one.html сделать так, чтобы скрипт считал name страницы, а потом вернул название, которое прописано в <title> в коде?

3. Что рекомендуете почитать (или видеокурс) по JS?

4.

примечание: атрибут disabled для тега <LINK> является нестандартизированным - об этом честно предупреждают разработчики браузеров - https://developer.mozilla.org/... ement/link

мей би в каком-то из валидаторов это дело и не пройдёт проверку
но этот атрибут поддерживается всеми браузерами (включая MSIE), т.е. работать будет везде

Я сейчас проверил, Opera и Firefox не поддерживают. Что необходимо сделать?

Спасибо.

Добавлено через 24 минуты
А может быть нельзя писать так:

HTML5
1
<li onClick="document.getElementById ('style1').disabled = false; document.getElementById ('style2').disabled = true;" title="Стиль 1">Стиль 1</li>

???

@Notortep · 09.10.2012, 19:54

Сообщение от alanat

Я сейчас проверил, Opera и Firefox не поддерживают.

ну вот... доверишься документации, не проверишь... и сядешь в лужу...

раз FireFox и Opera не поддерживают disabled, то можно пойти иным путём - не использовать много тегов <link>, а формировать всего один, и формировать его javascript'ом

код тогда можно сделать ещё короче - <link>'и вообще не прописываем, а сразу:

JavaScript
1
2
3
4
<script>
if (window.name.length) with (document) open (),
write ('<link rel="StyleSheet" type="text/css" href="' + window.name + '.css" />'), close ();
</script>

@alanat · 10.10.2012, 00:31 **[ТС]**

Сообщение от Notortep

JavaScript
1
2
3
4
<script>
if (window.name.length) with (document) open (),
write ('<link rel="StyleSheet" type="text/css" href="' + window.name + '.css" />'), close ();
</script>

Огромное спасибо! Работает!

Итак, мы перешли на страницу. Как находясь на странице, поменять файл .css?

Что прописать в кавычках?:

HTML5
1
<a href="#" onClick="..................."

Как делал ранее, по аналогии, не получилось у меня.

Спасибо.

@Notortep · 10.10.2012, 10:03

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
<!-- никаких тегов <link> не надо, ни единого -->
<!-- а вот css-файлов на сервере надо иметь не меньше, чем кнопок/ссылок на них -->
<script>
var s = (window.name.length) ? window.name : 'style1'; // style1 - по-умолчанию
with (document) open ('text/html', 'replace'),
write ('<link rel="StyleSheet" type="text/css" href="' + s + '.css" />'), close ();
 
function mF (file)
{
var StSh = document.styleSheets, lastStSh = StSh [StSh.length - 1];
lastStSh.disabled = true; if (!file) return;
var lnk = document.createElement ('link'); lnk.rel = 'StyleSheet',
lnk.type = 'text/css', lnk.href = file + '.css',
document.getElementsByTagName ('head') [0].appendChild (lnk);
}
</script>
</head>
<body>
...
<ul>
<li><u style="cursor: pointer; color: blue" onclick="mF ('style1')">style1</u>
<li><a href="#" onclick="mF ('style2'); return false">style2</a>
<li><input type="button" value="style3" onclick="mF ('style3')">
<li><a href="javascript: mF ('style4')">style4</a>
<li onclick="mF ('style5')" style="text-decoration: underline; cursor: pointer; color: blue" >style5
<li><button onclick="mF ()">none</button>
</ul>
...
</body>
</html>

@alanat · 10.10.2012, 10:12 **[ТС]**

Огромное спасибо. Все функционирует!

Боюсь сказать "последний вопрос", но на данном этапе это так.

Делаю колонки одинаковой высоты. Как результат - громоздкий код, подключен jQuery.
Работает, но хотелось бы поменьше кода, чтобы загружалось. Подскажите?

@alanat · 12.10.2012, 01:14 **[ТС]**

Сообщение от Notortep

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
<!-- никаких тегов <link> не надо, ни единого -->
<!-- а вот css-файлов на сервере надо иметь не меньше, чем кнопок/ссылок на них -->
<script>
var s = (window.name.length) ? window.name : 'style1'; // style1 - по-умолчанию
with (document) open ('text/html', 'replace'),
write ('<link rel="StyleSheet" type="text/css" href="' + s + '.css" />'), close ();
 
function mF (file)
{
var StSh = document.styleSheets, lastStSh = StSh [StSh.length - 1];
lastStSh.disabled = true; if (!file) return;
var lnk = document.createElement ('link'); lnk.rel = 'StyleSheet',
lnk.type = 'text/css', lnk.href = file + '.css',
document.getElementsByTagName ('head') [0].appendChild (lnk);
}
</script>
</head>

Есть один большой минус, который я увидел, только загрузив код на сервер: style1 загружается изначально, тут уж ничего не поделаешь - надо.
Но потом идет изменение на другой style2. При это идет загрузка нового файла с чуть-чуть другими параметрами: где-то изменили цвет, компоновку, видимость блоков. Но подгружается целый файл со стилем заново!
Можно ли сделать, чтобы изначально загруженный css-файл не выгружался, а в дополнение к нему загрузился еще один css-файл? Он будет значительно меньше, и пользователь не увидит безобразие, которое творится, когда страница не имеет файла css.

@Notortep · 12.10.2012, 01:40

строки ##12 и 13 уберите вовсе
вот эти

JavaScript
1
2
var StSh = document.styleSheets, lastStSh = StSh [StSh.length - 1];
lastStSh.disabled = true; if (!file) return;

@alanat · 12.10.2012, 02:03 **[ТС]**

Сообщение от Notortep

строки ##12 и 13 уберите вовсе
вот эти

JavaScript
1
2
var StSh = document.styleSheets, lastStSh = StSh [StSh.length - 1];
lastStSh.disabled = true; if (!file) return;

Спасибо, работает! Правда я еще перед скриптом в хеде добавил <link...>, иначе при переходе с другой страницы подгружается css только маленький css (который меняет стиль), а основной вообще не грузится.

Вы мне очень помогли. Огромное спасибо!

Еще я делаю колонки одинаковой высоты. Как результат - громоздкий код, подключен jQuery.
Работает, но хотелось бы поменьше кода, чтобы загружалось. Подскажете? Или jQuery самое оптимальное?

@Notortep · 12.10.2012, 02:20

Сообщение от alanat

Еще я делаю колонки одинаковой высоты. Как результат - громоздкий код, подключен jQuery.
Работает, но хотелось бы поменьше кода, чтобы загружалось. Подскажите? Или jQuery самое оптимальное?

создайте новую тему, дайте ссылку на ваш проект (или актуальную часть кода)
мей би кто-то чем-то поможет

* насчёт jquery - я её никогда не пользовал и никому не советую
полагаю эту библиотеку убивающей живую мысль

@alanat · 12.10.2012, 02:44 **[ТС]**

Спасибо. Порекомендуйте видеокурс или что-то почитать по javascript.

Рыбой вы меня накормили, хотелось бы и ловить научиться самому.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 777

	Передача константы через javascript на html страницах(Я напишу 1000 раз "JS не Java") 08.10.2012, 10:19. Показов 2515. Ответов 15 Метки нет (Все метки) Добрый день! У меня есть две html-страницы: one.html и two.html Страница one.html должна иметь ссылку в javascript на страницу two.html. При этом должны сохраняться следующие условия: 1. открываться страница должна в этом же окне 2. окну two.html должна передаваться константа со страницы one.html (не через поле ввода, а уже в ссылке заранее прописана), которая должна будет использоваться в javascript, находящейся на странице two.html Как необходимо сделать ссылку на странице one.html, и что (и где) необходимо написать на странице two.html? Прошу написать javascript код так, чтобы я его мог скопировать и вставить в html-страницу, т.к. если я увижу часть кода, то скорее всего не разберусь, что его должно окружать. Заранее благодарен. 0

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 777
	08.10.2012, 15:04 [ТС]
	Огромное спасибо 0

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 777
	08.10.2012, 23:09 [ТС]
	Спасибо. Очень удобно. Добавлено через 1 час 17 минут Notortep, я мало что понимаю в javascript, но в данном случае я так понял, что имени окна присваивается значение переменной, а потом считывается? Может быть сможете помочь с продолжением (какой-то необъемный вариант, как сейчас)? Цель передачи значения в другое окно следующая: javascript, размещенный на второй странице должен подгрузить css-файл в зависимости от значения. Например, передается значение "style2", тогда должен подгружаться style2.css, а если значение "style1", то подгрузится style1.css, а если "style3"... Спасибо. 0

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 777
	10.10.2012, 10:12 [ТС]
	Огромное спасибо. Все функционирует! Боюсь сказать "последний вопрос", но на данном этапе это так. Делаю колонки одинаковой высоты. Как результат - громоздкий код, подключен jQuery. Работает, но хотелось бы поменьше кода, чтобы загружалось. Подскажите? 0

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 777
	12.10.2012, 02:44 [ТС]
	Спасибо. Порекомендуйте видеокурс или что-то почитать по javascript. Рыбой вы меня накормили, хотелось бы и ловить научиться самому. 0