Блог

Главная - Вопросы по программированию - Отправка данных из html.index в functions.js файл

Отправка данных из html.index в functions.js файл

#javascript #html

Вопрос:

В настоящее время я застрял на работе с файлом .html, который должен передавать данные в файл javascript с функциями. Это выглядит следующим образом:

Данные

 let data = [
    ["ID1", "URL1"],
    ["ID2", "URL2"],
    ["ID3", "URL3"],
]

HTML-часть, вызывающая файл функций javascript с

 <!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <title>Metabase Dashboard Carousel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="./src/carousel.js"></script>
  </head>
  <body onLoad="createFrames('test!')">
    <button class="btn btn-primary " onclick=autoRun()>Start</button>
    <button class="btn btn-primary " onclick=pause()>Pause</button>
  </body>
</html>

Функция, которая называется

 function createFrames(text) {
    console.log(text);
    for(var i in data)        
        prepareFrame(data[i][0], data[i][1]);
};

Вызов функции действительно дает мне распечатку теста! на консоли .html с помощью инспектора Mozilla. Однако выполнение остальной части сценария или фактическое использование переменной данных в качестве входных данных в функции загрузки тела не работает.

  1. Как это происходит и что можно было бы исправить?
  2. Кроме того, не имеет прямого отношения к тому, что является хорошим способом загрузки файлов между связанными .js / .yml / .json, так как при запуске кода в .html возвращает то, что требуется, не определено?

Спасибо за помощь!

Комментарии:

1. Что такое prepareFrameSources ? Что такое prepareFrame ? Определение let data как внутренней, так и внешней функции — какая из них будет иметь приоритет?

2. prepareFrame-это функция, которая динамически добавляет <iframes> в тело html-документа. Пусть данные были неверно определены в функции, она должна принимать переменную данных, определенную в начале моего вопроса.

3. И проблема в том, что createFrames функция НЕПРАВИЛЬНО обрабатывает объявленную data переменную при загрузке страницы? Также — где определена эта переменная? Это внутри carousel.js ?

4. Проблема в том, что вместо передачи createFrames («тест!») При загрузке в тело я хотел бы иметь что-то вроде: <body onLoad= » createFrames(данные)»>, Где данные-это список, определенный в начале этого обсуждения. Я попытался добавить данные непосредственно при загрузке в теги скрипта, но, похоже, это не работает. В частности, я бы не хотел, чтобы переменная data в carousel.js.

5. так где же определена эта переменная? Собираетесь ли вы определить его непосредственно в качестве аргумента функции? Можете ли вы принять другую стратегию, отличную <body onload="func(data)"> от etc???

Ответ №1:

Если вы можете изменить свой подход и хотите определить данные во время выполнения, которые будут использоваться onload функцией, вы можете попробовать такой подход. При этом используется анонимная функция самоисполнения для выполнения prepareFrame команд после полной загрузки DOM. Данные предоставляются в качестве аргумента анонимной функции, и другие функции могут быть определены в этой области, чтобы все было аккуратно.

 (function(data){
  const d=document;
  
  // emulate actual functions with simple console cmds for testing only
  const prepareFrame=(a,b)=>{
    console.log('prepareFrame(%s,%s)',a,b)
  };
  const autoRun=(e)=>{console.log(e.target);return true};
  const pause=(e)=>{console.log(e.target);return true}


  d.addEventListener('DOMContentLoaded',()=>{
     data.forEach(a=>{
      prepareFrame(a[0],a[1])
     });

     d.querySelectorAll('button[data-task]').forEach(bttn=>bttn.addEventListener('click',function(e){
      switch(this.dataset.task){
        case 'start':return autoRun(e);
        case 'pause':return pause(e);
      }
     }))
  })  
})([
  ["ID1", "URL1"],
  ["ID2", "URL2"],
  ["ID3", "URL3"],
]); 
 <button class='btn btn-primary' data-task='start'>Start</button>
<button class='btn btn-primary' data-task='pause'>Pause</button>

Например:

 <!DOCTYPE html>
<html>
  <head>
    <meta content='text/html;charset=utf-8' http-equiv='Content-Type' />
    <meta content='utf-8' http-equiv='encoding' />
    
    <title>Metabase Dashboard Carousel</title>
    <link href='//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We' crossorigin='anonymous' />
    
    <script src='//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src='./src/carousel.js'></script>
  </head>
  
  <body>
    <button class='btn btn-primary' data-task='start'>Start</button>
    <button class='btn btn-primary' data-task='pause'>Pause</button>
  </body>
  
  <script>
    (function(data){
      const d=document;
      
      // emulate actual functions with simple console cmds for testing only
      const prepareFrame=(a,b)=>{
        console.log('prepareFrame(%s,%s)',a,b)
      };
      const autoRun=(e)=>{console.log(e.target);return true};
      const pause=(e)=>{console.log(e.target);return true}


      d.addEventListener('DOMContentLoaded',()=>{
         data.forEach(a=>{
          prepareFrame(a[0],a[1])
         });

         d.querySelectorAll('button[data-task]').forEach(bttn=>bttn.addEventListener('click',function(e){
          switch(this.dataset.task){
            case 'start':return autoRun(e);
            case 'pause':return pause(e);
          }
         }))
      })  
    })([
      ["ID1", "URL1"],
      ["ID2", "URL2"],
      ["ID3", "URL3"],
    ]);
  </script>
</html>
Метки: