• 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';
      });
    }
  });
}

 

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


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

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

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

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

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

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

Войти

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

Войти сейчас



  • Спрашивают сейчас

  • Пишут сейчас

    • Дорогие Друзья! Рад вам сообщить о выходе новой версии движка Flextype и обновленном плагине Admin (Flextype 0.7.3 + Admin 0.3.0) 🚀 Это серьезное обновление для Flextype! Множество новых возможностей и фиксов улучшающие стабильность и производительность системы!  За эти 19 дней было потрачено более 100 часов на разработку и тестирование, запушено более 300 коммитов в репозитории проекта 👽 Изменения в Flextype 0.7.3: 
      - Flextype Компонент I18n обновлен до 1.2.0
      - Flextype Компонент Filesystem обновлен до 1.1.3
      - Symfony YAML Компонент обновлен до 4.2.1
      - Настройки теперь хранятся в одном settings.yaml файле
      - Content: добавлена возможность создавать скрытые страницы. Изменения в Admin 0.3.0:
      - Новая красивая админка в темном стиле! 
      (светлая тема будет в след. релизах)
      - Information: Страница информации отображает версию ядра и версию плагина админки
      - Users: теперь будут создаваться более безопасные пароли используя php функции password_hash и password_verify
      - Files manager: заменен на новый Media manager.
      - Pages Manager: улучшен функционал клонирования страниц. Теперь клонируется вся папка со страницей.
      - Pages Manager: исправлена бага с переименованием страниц #26 
      - Pages Manager: поле ссылки удалено из таблицы с страницами
      - Pages Manager: в быстрые экшена добавлена возможность просмотра страниц, ссылка открывает страницу в новом окне браузера.
      - Pages Manager: улучшено отображение вложенных страниц! теперь более наглядно отображаются вложенные страницы.
      - Pages Manager: исправлена бага с ссылкой на страницу по умолчанию, которая далее ломала логику работы с клонированными странницами.
      - Pages Manager: исправлена бага с пустым полем template
      - Pages Manager: добавлена возможность выбирать тему страниц при ее создании.
      - Pages Manager: много улучшений и исправлений в функционале по работе с страницами.
      - Pages Manager: Новый редактор страниц, редактор схемы (индивидуальные поля), редактор шаблона, редактор исходника страницы!
      - Plugins Manager: для плагина админки выключатель отключен, но отображается.
      - General: используется новые I18n 1.2.0 компонент.
      - General: используется новые Filesystem 1.1.3 компонент.
      - General: добавлена библиотека Gajus Dindent HTML для форматирование HTML кода, это позволяет сохранять красивый HTML после редактора!
      - General: добавлен Assets Manager для Javascript 
      - General: добавлен Animate.css для анимаций.
      - General: Fontawesome обновлен до 5.6.0 
      - General: Twitter Bootstrap обновлен до 4.1.3
      - General: Codemirror добавлен для лучшей работы с кодом.
      - General: es6-promise обновлен до 4.2.5
      - General: popper.js обновлен до 1.14.6
      - General: gulp-autoprefixer обновлен до 6.0.0
      - General: добавлена система отображения оповещений #41 
      - General: добавлена валидация форм jquery.form-validator.js
      - General: добавлено форматирование YAML файлов при их сохранении.
      - General: много общих улучшений архитектуры и скорости!
      - General: обновленная и улучшенная навигация!
      - Translates: много исправлений и улучшений в переводах. 
      Спасибо: Hmelex, AndiLeni, diomed Скачать Flextype 0.7.3
      https://github.com/flextype/flextype/releases/download/v0.7.3/flextype-0.7.3.zip Скачать Flextype 0.7.3 + Admin 0.3.0
      https://github.com/flextype/flextype/releases/download/v0.7.3/flextype-0.7.3-admin-0.3.0.zip Если у вас есть предложения по улучшению Админки и Ядра системы, пишите в комментариях и на официальном DISCORD сервере: https://discord.gg/tjEHXWD  
    • Большое спасибо за помощь, добавил с помощью теней по бокам  белые отступы и все получилось как в примере.
  • Лучшие авторы

  • Текущие цели пожертвований