javascript - 如何从一个文件加载另一个文件中的div(在iframe内)

Question

我的目标是将数据从适当的文件加载到 div当我选择任何选项时的部分。我需要加载<div>在一个文件中来自另一个文件(在 iframe 内)。我被困在如何获取值并将其存储在变量中。如果我将任何静态数据分配给变量( template_1 、 template_2 、 template_3 )，则一切正常，但我想从其他文件( template_one.html 、 template_2.html 等)加载它。

template_1有load()方法，但我知道这是错误的。相反，我想要一个适当的文件 div 的路径。与其他变量相同

我找到了类似的解决方案here与 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 = '';
      };
    };
  };
});

project tree

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>

希望这篇文章能帮到你。