Katerina23

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

Recommended Posts

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

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

Share this post


Link to post
Share on other sites

У меня 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 by Katerina23

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Я пока сделал только с фреймами внутри 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;
  });
});

 

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,333
    Total Members
    3,128
    Most Online
    sohaibkhalid614
    Newest Member
    sohaibkhalid614
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.