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

Katerina23 · October 10, 2018

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

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

DivMan · October 10, 2018

выложи в песочницу

Switch74 · October 11, 2018

https://learn.javascript.ru/iframes

Katerina23 · October 11, 2018

У меня 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"));
}

Edited October 11, 2018 by Katerina23

mrnobody · October 11, 2018

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

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

Switch74 · October 11, 2018

у вас id="debug'"
а вы ищите через getElementById("debug")

вот он его и не находит

mrnobody · October 11, 2018

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

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

mrnobody_test.zip

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

id="debug'" - после слова debug стоит одинарная кавычка
Вы задаете значение инпуту с помощью свойства `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;
  });
});

Katerina23 · October 12, 2018

Я сделала по другому, создала несколько ссылок с помощью цикла. Теперь мне надо при щелчке на каждой ссылке вывести уникальный 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';
      });
    }
  });
}

Sign In

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

Question

Katerina23

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

DivMan

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Katerina23

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

Katerina23

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information