时间戳

首页 > 解决方案 > 如何从另一个文件（在 iframe 内）加载一个文件中的 div

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

问题描述

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

项目树

标签： javascriptjquery

解决方案

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>

我希望这个对你有帮助。

推荐阅读