Откройте ранее существующую страницу и измените ее части

Question

Я использую 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, он создаст совершенно новую страницу.

javascript jquery html

3

James 17 Дек 2015 в 02:46

Answer 1

Есть несколько возможных проблем с вашим скриптом.

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. Сначала вам нужно «разрешить» вашей странице открывать окно через некоторую конфигурацию в браузере (обычно значок блокировщика всплывающих окон становится очевидным).

3

shennan 17 Дек 2015 в 11:27

Answer 2

К сожалению, третья идея Шеннана оказалась верной, поэтому мне пришлось в итоге решить ее следующим образом: < Сильный > 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>

0

James 17 Дек 2015 в 23:17

Answer 3

Очевидная проблема заключается в том, что 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 только для этого, хотя вы включаете его.

0

beercohol 17 Дек 2015 в 00:02

Answer 4

Вы пытаетесь изменить элемент на другой странице, а с 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;
}

0

devlin carnate 17 Дек 2015 в 00:05

Откройте ранее существующую страницу и измените ее части

4 ответа

Похожие вопросы

Новые вопросы

javascript