时间戳

首页 > 解决方案 > 两个如何在 javascript 文件中提及两个 HTML 文件

javascript - 两个如何在 javascript 文件中提及两个 HTML 文件

问题描述

在这些代码行中，是指向与我之前在我的 JS 文件中的函数中使用的不同 HTML 文件的 id#result的链接。div

任何人都知道我怎样才能使它工作，这个 JS 函数将附加到div id="result"我在不同 HTML 中的空？

function getDetails() {
    window.close();
    var parentEl = $(this).parents('[data-book-id]'); // <-- index.html
    var bookAuthor = parentEl.find('[data-book-author-input]').val(); // <-- index.html
    var bookTitle = parentEl.find('[data-book-title-input]').val(); // <-- index.html
    var bookYearOfPublication = parentEl.find('[data-book-year-input]').val(); // <-- index.html

    var search = bookAuthor + bookTitle + bookYearOfPublication;
    if(search == "")
    {
      alert("Please enter something in the field");
    }
    else{
      window.open('http://localhost:8081/details');
      var url = "";
      var img = "";
      var title = "";
      var author = "";

      $.get("https://www.googleapis.com/books/v1/volumes?q=" + search, function(response){

        for(i=0;i<response.items.length;i++)
        {
          title=$('<h5 class="center-align white-text">' + response.items[i].volumeInfo.title + '</h5>');
          author=$('<h5 class="center-align white-text"> By:' + response.items[i].volumeInfo.authors + '</h5>');
          img = $('<img class="aligning card z-depth-5" id="dynamic"><br><a href=' + response.items[i].volumeInfo.infoLink + '><button id="imagebutton" class="btn red aligning">Read More</button></a>');
          url= response.items[i].volumeInfo.imageLinks.thumbnail;
          img.attr('src', url);
            title.appendTo('#result'); // <-- details.html
          author.appendTo('#result'); // <-- details.html
          img.appendTo('#result'); // <-- details.html
        }
      });
    }
    return false;
  }

With the local storage:

function getDetails() { 
var parentEl = $(this).parents('[data-book-id]'); var book = parentEl.find('[data-book-author-input]').val() + parentEl.find('[data-book-title-input]').val() + parentEl.find('[data-book-year-input]').val(); window.open('localhost:8081/details'); window.localStorage.setItem('book', JSON.stringify(book)); } // <-- index.html      

booksContainer.on('click', '[data-book-details-button]', getDetails); // <-- index.html 

 function setDetails() {

    var search = window.localStorage.getItem('book');

    if(search == "")
    {
      alert("The value from API is null");
    }
    else{
      var url = "";
      var img = "";
      var title = "";
      var author = "";

      $.get("https://www.googleapis.com/books/v1/volumes?q=" + search, function(response){

        for(i=0;i<response.items.length;i++)
        {
          title=$('<h5 class="center-align white-text">' + response.items[i].volumeInfo.title + '</h5>');
          author=$('<h5 class="center-align white-text"> By:' + response.items[i].volumeInfo.authors + '</h5>');
          img = $('<img class="aligning card z-depth-5" id="dynamic"><br><a href=' + response.items[i].volumeInfo.infoLink + '><button id="imagebutton" class="btn red aligning">Read More</button></a>');
          url= response.items[i].volumeInfo.imageLinks.thumbnail;
          img.attr('src', url);
            title.appendTo('#result');
          author.appendTo('#result');
          img.appendTo('#result');
          window.localStorage.clear();
        }
      });
    }
    return false;
  } // <-- details.html

  $('[search-details-button]').on('click', setDetails); // <-- details.html

标签： javascripthtml

解决方案

如果您使用脚本进行一些修改，那么当您导航到另一个页面时，一切都会“忘记”。

为了保留共享数据，一些解决方案可能是：

使用框架

像Angular、React或Vue.js（恕我直言，目前最流行的）。

如果您开始使用跨页面共享数据做复杂的事情，我会敦促您开始学习一些先进的 webapp 框架，它们旨在解决这个确切的问题，等等。

但是，这并不是直接应用的很快，它们都有自己的学习曲线。作为初学者，您有时会对不同的新概念感到困惑。

基本上，他们所做的是在一个真实的网页中创建自己的“页面”系统，因此从浏览器的角度来看，您永远不会真正离开，而是构建一些在需要时显示的组件，让您能够在他们之间共享数据。

当然，您现在可能需要一个更简单的解决方案。我能想到的有以下几点：

使用本地存储

这不是我最喜欢的解决方案，有一些限制，但这可以快速解决您的问题。

  • 首先，当您得到结果时，将这个“共享数据”存储在浏览器的localstorage中。
  • 其次，使用 JavaScript 函数在页面加载时检查本地存储是否有内容，如果是，则执行您需要的添加。
  • 例如，您可能需要进行试验：您希望何时清除它？ETC..

一些随机的博客文章可以向您展示这是如何工作的：

您可以查看一些博客文章和另一篇向您展示一些使用示例的文章。

还有其他解决方案，也许有人会在这里发布一些。

推荐阅读