как загрузить div в один файл из другого (внутри iframe)

Question

Моя цель - загрузить данные из соответствующего файла в разделы div, когда я выберу любую опцию. Мне нужно загрузить <div> в один файл из другого (внутри iframe). Я застрял на том, как получить значение и сохранить его в переменной. Все работает нормально, если я назначаю переменным (template_1, template_2, template_3) любые статические данные, но я хочу загрузить их из других файлов (template_one.html, template_2.html и т. Д.).

template_1 имеет метод load(), но я знаю, что это неправильно. Вместо этого я хочу путь к соответствующему файлу div. То же самое с другими переменными

Я нашел похожее решение здесь с function load, но я не уверен, будет ли это работать и как добавить это к моей функции.

Объекты массива являются случайными, поэтому, пожалуйста, не беспокойтесь об этом

jQuery(document).ready(function($) {

  var template_1 = $('#section_one').load('template_one.html', '.section_one')
  var template_2 = "<div><h1>template2</h1></div>"
  var template_3 = "<div><h1>template3</h1></div>"
  var templates_array = [
    [template_1, template_1, template_1, template_1, template_1],
    [template_2, template_2, template_2, template_2, template_2],
    [template_3, template_3, template_3, template_3, template_3],
  ]

  function load(url, element) {
    req = new XMLHttpRequest();
    req.open("GET", url, false);
    req.send(null);
    element.innerHTML = req.responseText;
  }

  document.getElementById('id_template').onchange = function(event) {
    let get_val = event.target.selectedOptions[0].getAttribute("value");
    if (get_val) {
      for (let i = 0; i < templates_array.length; i++) {
        var iframe = document.getElementsByTagName('iframe')[i].contentWindow.document;
        var iframe_content = iframe.querySelector('body');
        iframe_content.innerHTML = templates_array[get_val - 1][i];
      };
    } else {
      for (let i = 0; i < templates_array.length; i++) {
        var iframe = document.getElementsByTagName('iframe')[i].contentWindow.document;
        var iframe_content = iframe.querySelector('body');
        iframe_content.innerHTML = '';
      };
    };
  };
});

дерево проекта

Answer 1

Код Jquery

         $(document).ready(function(){

        $(document).on('click', '#button_1', function() {
            $('#div_1').load('one.html')
        });

        $(document).on('click', '#button_2', function() {
            $('#div_2').load('two.html')
        })

    });

Код HTML

    <a href="javascript:void(0);" id="button_1">Button_1</a>
    <BR>
    <BR>
    <a href="javascript:void(0);" id="button_2">Button_2</a>
    <BR>
    <BR>
    <div id="div_1"></div>
    <div id="div_2"></div>

Надеюсь, это поможет вам.

Answer 2

В iframe:

<textarea id="ta"></textarea>

<script>
$(document).ready(function(){

    $(document).on('change', '#ta', function() {
        parent.textAreaChanged(this.value);
    });

});
</script>

В родительском:

<div id="display"></div>

<script>
function textAreaChanged(value){
    $('#display').text(value);
}
</script>