如何從另一個文件（在 iframe 內）加載一個文件中的 div

Question

我的目標是在 select 任何選項時將數據從適當的文件加載到div部分。 我需要將<div>從另一個文件（在 iframe 內）加載到一個文件中。 我被困在如何獲得價值並將其存儲在變量中。 如果我將任何 static 數據分配給變量（ template_1 ， template_2 ， template_3 ），一切正常，但我想從另一個文件（ template_one.html ， template_2.html onA828）加載它

template_1有load()方法，但我知道這是錯誤的。 相反，我想要一個適當的文件 div 的路徑。 與其他變量相同

我在這里找到了一個與function load類似的解決方案，但我不確定這是否可行以及如何將其添加到我的 function 中。

數組對象是隨機的，所以請不要擔心

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>