Я использую javascript, чтобы открыть файл kind_county в новом окне / вкладке, а затем jquery, чтобы изменить содержимое тега h1 с идентификатором видов видов.
< Сильный > open_event_test.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>Click the button to open a new window called "MsgWindow" with some text. </p>
<button onclick="myFunction('Yada')">Yada</button>
<script>
function myFunction(species)
{
console.log(species);
var myWindow = window.open("species_county.html", species);
myWindow.document.getElementById("speciesTitle").html(species);
}
</script>
</body>
</html>
< Сильный > species_county.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1 id="speciesTitle">Species in County</h1>
</body>
</html>
Я получаю сообщение об ошибке, говоря, что элемент, который я беру, имеет значение null. Мне нужно заменить только некоторый контент. Document.write не работает, потому что он не откроет файл kind_county, он создаст совершенно новую страницу.
4 ответа
Есть несколько возможных проблем с вашим скриптом.
1) Элементы не имеют HTML-метод
Как упоминалось beercohol , такого метода, как html()
, нет в HTML-элемент. html()
- это метод jQuery, который является свойством объекта jQuery. Чтобы использовать это, вам нужно либо использовать jQuery для выбора элемента, либо использовать собственное свойство JavaScript innerHTML
.
myWindow.document.getElementById("speciesTitle").innerHTML = species;
// or
$(myWindow.document).find('#speciesTitle').html(species);
2) DOM окна / фрейма не загружен
Существует высокая вероятность того, что к тому времени, когда вы запустите код для изменения элемента speciesTitle
, открытое вами окно еще не завершило загрузку DOM. Это может привести к ошибке в соответствии с:
Ошибка типа: myWindow.document.getElementById (...) имеет значение null
Вам нужно каким-то образом убедиться, что вы не запускаете код, изменяющий HTML, до тех пор, пока DOM нового окна не завершит загрузку. Традиционно, это работа для jQuery, но вот быстрый (не кросс-браузерный) чистый пример JavaScript в вашем методе myFunction
:
function myFunction (species) {
var myWindow = window.open("species_county.html", species);
myWindow.onload = function() {
// DOM has loaded
this.document.getElementById("speciesTitle").innerHTML = species;
}
}
3) Одинаковая политика происхождения
По соображениям безопасности большинство браузеров не позволяют вам вносить изменения в окно другого фрейма, если оба фрейма не принадлежат одному и тому же источнику. Если вы работаете локально, скорее всего, вы не используете доменное имя или IP-адрес, которые совпадают. Chrome не позволяет вам обмениваться данными через файловую систему (по крайней мере, по умолчанию), но у меня был некоторый успех с Firefox, отказавшимся от политики одинакового происхождения между файлами локально в файловой системе. В любом случае, это не будет работать на законном браузере, если вы пытаетесь установить связь с фреймом из совершенно другого домена.
Для получения дополнительной информации см. window.open () FAQ на сайте MDN. Обратите внимание на часть о кросс-домене:
Скрипт, загруженный в окно (или фрейм) из отдельного источника (доменного имени), не может ни получить, ни установить свойства другого окна (или фрейма) или свойства любого из его HTML-объектов, происходящих из другого отдельного источника (доменного имени).
4) Блокировщики всплывающих окон
Также вероятно, что у вас могут возникнуть проблемы с различными реализациями браузеров блокировщиков всплывающих окон. Они сразу откажутся открывать новый фрейм, в результате появится объект окна null
. Сначала вам нужно «разрешить» вашей странице открывать окно через некоторую конфигурацию в браузере (обычно значок блокировщика всплывающих окон становится очевидным).
К сожалению, третья идея Шеннана оказалась верной, поэтому мне пришлось в итоге решить ее следующим образом: < Сильный > open_event_test
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>Click the button to open a new window called "MsgWindow" with some text.</p>
<button onclick="myFunction('Bombus balteatus')"><em>Bombus balteatus</em> Dahlbom</button>
<button onClick="myFunction('Bombus auricomus')"><em>Bombus auricomus</em> (Robertson)</button>
<script>
function myFunction(species)
{
var newhtml = '<!DOCTYPE html><head><meta charset="utf-8"><html><title>'+species+'</title></head><body><h1><em>'+species+'</em> in County</h1></body></html>';
var newWindow = window.open(species, '_blank');
newWindow.document.write(newhtml);
}
</script>
</body>
</html>
Очевидная проблема заключается в том, что html()
не является методом объекта Element
, возвращаемого getElementById()
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById https://developer.mozilla.org/en-US/docs/Web/API/Element
Вместо этого вы ищете свойство innerHTML
.
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
Попробуйте это для своего скрипта:
<script>
function myFunction(species) {
console.log(species);
var myWindow = window.open("species_county.html", species);
myWindow.document.getElementById("speciesTitle").innerHTML = species;
}
</script>
html()
- это функция jQuery, поэтому я подозреваю, что именно здесь вы запутались. Однако вам не нужен jQuery только для этого, хотя вы включаете его.
Вы пытаетесь изменить элемент на другой странице, а с JavaScript это невозможно сделать так, как вы его обрабатываете.
Одним из способов достижения вашей цели является передача параметра $ _GET и использование JavaScript на вновь загруженной странице для изменения элемента.
Измените это:
var myWindow = window.open("species_county.html", species);
myWindow.document.getElementById("speciesTitle").html(species);
К этому:
var url = "species_county.html?species=" + encodeURIComponent(species);
window.open(url);
А затем в видовом_счете.html найдите параметр вида и измените заголовок.
var mySpecies = location.search.split('species=')[1];
if(mySpecies !== undefined) {
document.getElementById("speciesTitle").innerHTML=mySpecies;
}
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.