如何在javascript文件中提到两个HTML文件

在这些代码行中，

#result

是指向

div

的id的链接，该id与我在JS文件中之前在函数中使用的HTML文件不同

任何人都知道我如何使它工作，这个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

函数getDetails（）{ window.close（）；

---

var parentEl=$（this）.parents（'[databook id]'）；//如果您使用脚本应用一些修改，那么当您导航到另一个页面时，所有内容都会被“遗忘”

要保留共享数据，一些解决方案可以是：

使用框架 像Angular、React或Vue.js（目前最流行的）

如果您开始使用跨页面共享数据做复杂的事情，我建议您开始学习一些先进的webapp框架，它们是为了解决这个问题而设计的，还有许多其他的东西

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

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

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

使用本地存储 这不是我最喜欢的解决方案，有一些限制，但这可以很快解决您的问题

• 首先，当您得到结果时，将此“共享数据”存储在浏览器的浏览器上
• 第二，使用JavaScript函数检查页面加载时本地存储上是否有内容，如果是，则执行所需的添加
• 您可能需要进行实验，例如：您希望何时清除它？等等

一些随机的博客文章可以告诉你这是如何工作的：

您可以查看并向您展示一些使用示例

---

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

将此脚本导入您希望使用的各种HTML文件中。（作为单独的

.js

文件，而不是直接在HTML文件中编写javascript代码）谢谢！我已经有了一个单独的js。我刚刚在上面的代码中指出了我使用哪个html文件。但是它不起作用obviously@MartinMatthewP.很高兴提供帮助！请投票和/或接受有用的答案；）。好的，我两个都会做，但如果你在前端很好，你能帮我解决我上面发布的代码为什么不起作用吗？对不起，我不知道我在HTML和js方面没有太多经验（几乎没有经验）。我在上面添加了编辑过的版本。“不工作”是什么意思？您有错误吗？如果您在浏览器中查看Javascript控制台，是否有任何消息？我看到您“清除”每次迭代时的本地存储。清除意味着删除所有内容。因此，您永远不会在其中保存任何内容。好的，我将“清除”移到了“返回false”之前的行中；现在所有内容都可以正常工作了！非常感谢！