Передача константы через 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.

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

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

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

	Передача константы через javascript на html страницах(Я напишу 1000 раз "JS не Java") 08.10.2012, 10:19. Показов 2526. Ответов 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