• 0
Katerina23

Загрузка данных в поле 1-ого фрейма, при нажатии на ссылку 2-ого фрейма

Вопрос

Мне нужно, чтобы при нажатии кнопки во втором фрейме, происходила загрузка в первом фрейме, но у меня вместо этого происходит ошибка. 

index.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="frames.js"></script>
<script>
       view_frames();
</script>
</head>
<body>

</body>
</html>

page1.html

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="frames.js"></script>
</head>
<body>
<!-- поле куда надо загрузить данные -->
<input type="text" id="debug'">
</body>
</html>

page2.html

<!DOCTYPE html>
<html>
<head>                                                       
   <script type="text/javascript" src="frames.js"></script>
</head>
<body>
<a href="#" onclick="test()">test</a>
</body>
</html>

frame.js

var t = "test";
function view_frames()
{
  
  document.write('<frameset rows="100%" cols="70%, *" FRAMEBORDER="0" BORDER="0" FRAMESPACING="1">');
  document.write('<frame name="mainpage" src="./page1.html">');
  document.write('<frame name="page2" src="./page2.html">');
  document.write('<frameset>');
 
  parent.mainpage.document.getElementById("debug").innerHTML = t; 
}

function test()
{
 console.log(t);
 parent.mainpage.document.getElementById("debug").innerHTML = t;

}

На всякий случай

test.rar

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0

У меня body пустой, не могу получить доступ к input. Выдаёт всю структуру html документа, через консоль кроме input.

function view_frames()
{
  
  document.write('<frameset rows="100%" cols="70%, *" FRAMEBORDER="0" BORDER="0" FRAMESPACING="1">');
  document.write('<frame name="mainpage" src="./page1.html">');
  document.write('<frame name="page2" src="./page2.html">');
  document.write('<frameset>');
  
  //0 - первый фрейм (mainpage), 1 - второй фрейм (page2)
  var iframe = document.getElementsByTagName('frame')[0];
  var iframeDoc = iframe.contentWindow.document;
    //<body></body> - вывод через консоль
  console.log(iframeDoc.body);
    //null - вывод через консоль
  console.log(iframeDoc.getElementById("debug"));
}

 

Изменено пользователем Katerina23

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Попробуйте идти от простого — встройте фреймы через html, а не через js.

Хоетел уточнить, вы запускате на локальном сервере или просто файлики в папке и вы открываете index.html? Если у вас второй случай, то мне кажется не заработает из-за политики безопасности.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Я пока сделал только с фреймами внутри html. Нужно запускать на локальном сервер, просто так не сработает.

image.png

Вдруг пригодится. Если пользуетесь Visual Studio Code, для него есть плагин Live Server, как раз подходит для небольших тестов.

mrnobody_test.zip

Еще заметил у вас ошибки:

  1. id="debug'" - после слова debug стоит одинарная кавычка

  2. Вы задаете значение инпуту с помощью свойства `innerHTML`, а нужно использовать свойство `value`

UPD: Сделал динамическое добавление фреймов.

mrnobody_test_2.zip

Вот JS

Скрытый текст

var frameElem1 = document.createElement('iframe');
frameElem1.name = 'frame1'
frameElem1.src = 'page1.html';
frameElem1.frameBorder = 0;

var frameElem2 = document.createElement('iframe');
frameElem2.name = 'frame2'
frameElem2.src = 'page2.html';
frameElem2.frameBorder = 0;

document.body.appendChild(frameElem1);
document.body.appendChild(frameElem2);

// Ждем полной загрузки страницы и фреймов
window.addEventListener('load', function () {
  var frame1 = window.frames.frame1;
  var frame2 = window.frames.frame2;

  var frame1Documnet = frame1.document;
  var frame2Documnet = frame2.document;

  var input = frame1Documnet.querySelector('#debug');
  var link = frame2Documnet.querySelector('a');
  var output = frame2Documnet.querySelector('output');

  link.addEventListener('click', function (evt) {
    evt.preventDefault();
    var inputValue = input.value;
    output.value = inputValue;
  });
});

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Я сделала по другому, создала несколько ссылок с помощью цикла. Теперь мне надо при щелчке на каждой ссылке вывести уникальный id этой ссылки в console.log, как это можно сделать, вот код?

var arr = ['Ссылка1','Ссылка2','Ссылка3','Ссылка4','Ссылка5'];
var arr1 = ['test1','test2','test3','test4','test5'];
var str, str1;
function view_frames()
{
  
  document.write('<frameset rows="100%" cols="70%, *" FRAMEBORDER="0" BORDER="0" FRAMESPACING="1">');
  document.write('<frame name="mainpage" src="./page1.html">');
  document.write('<frame name="page2" src="./page2.html">');
  document.write('<frameset>');
  frame1 = window.frames["mainpage"];
  frame2 = window.frames["page2"];
  window.addEventListener('load', function () {
    str = ""; 
    str1 = "";
    for (var i = 0; i < arr.length; i++)
    {
        str += '<a href="#">'+arr[i]+'</a><br>';
        str1 += '<input type="text" id="'+arr1[i]+'"><br>';
        
    } 
    frame2.document.getElementById("test").innerHTML=str+"<br>";
    frame1.document.getElementById("test").innerHTML=str1+"<br>";
    for (var j = 0; j < arr.length; j++)
    {
      var link = frame2.document.getElementsByTagName("a")[j];
      link.addEventListener('click', function (evt) {
        evt.preventDefault();
        var output = window.frames["mainpage"].document.getElementById("test1");
        output.value = 'test';
      });
    }
  });
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас