让单个javascript文件跨多个html页面工作

Getting single javascript file work across multiple html pages

本文关键字：html 工作 单个 javascript 文件      更新时间：2023-09-26

我正在编写一个刽子手游戏，遇到了一个问题。

问题是，我有一个main.html页面，我在其中选择一个类别开始玩游戏。当我点击一个类别时，它会将我带到新页面。但是，在进入新页面之前，我有一个功能，可以随机选择一个单词，并创建空白输入空间，让用户开始猜测这个单词。但当它把我带到新的页面时，所有这些都会被刷新。我知道我的问题是什么，但我不确定如何解决它，因为我正处于学习javascript和html的初始阶段。我在下面添加了代码片段。感谢您的帮助。非常感谢！

    var hangman = {
    	sports: ['football','basketball','tennis','cricket','rugby','ping pong','badminton','hockey'],
    	animals: ['tiger','lion','leopard','wolf','dog','cat','monkey','donkey'],
    	countries: ['india','australia','america','england','new zeland','fiji','singapore']
    };
    var word;
    var category;
    //capture category list on HTML
    //var categoryList = document.getElementById('category-list');
    //var input = document.getElementById('toInput');
    var keys = Object.keys(hangman);
    //Grab the category being chose by the user
    var selectCategory = function() {
    	var categoryList = document.getElementById('category-list');
    	//categoryList.addEventListener('click', function () {
    		if(event.target.tagName === 'LI') {
    			for(var i=0; i<keys.length; i++) {
    				if(keys[i] === event.target.innerHTML.toLowerCase()) {
    					category = keys[i];
    				}
    			}
    			word = hangman[category][Math.floor(Math.random()*hangman[category].length)];
    		}
    		createInput(word);
    	//});
    }
    var createInput = function(arg) {
    var input = document.getElementById('toInput');
    var newItem;
    for(var i=0; i<arg.split('').length; i++) {
    	if(arg.split('')[i] !== ' ') {
    		newItem = document.createElement('input');
    		newItem.className = 'input-item';
    		input.appendChild(newItem);
    		}
    	else {
    		newItem = document.createElement('input');
    		newItem.className = 'empty-item';
    		input.appendChild(newItem);
    	}
    	}
    		window.location.assign("play.html");
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>GoC</title>
    	<link rel="stylesheet" href="style-main.css" href="http://fonts.googleapis.com/css?family=Cinzel+Decorative">
    </head>
    <body>
    	<div class="wrap-main">
    		<h1 class="intro">GAME<span>oF</span>CAKES</h1>
    		<h2 class="tag-line">A CAKE FOR A WINNER!</h2>
    		<ul class="page-links">
    		    <li><a href="player1.html">1 PLAYER</a></li>
    		    <li><a href="player2.html">2 PLAYER</a></li>
    	    </ul>
    	<div id="category">
    		<p>Pick a Category to start..</p>
    		<ul id="category-list" onclick="selectCategory()">
    			<li>Sports</li>
    			<li>Animals</li>
    			<li>Countries</li>
    		</ul>
    	</div>
        </div>
    <script type="text/javascript" src="hangman.js"></script>
    </body>
    </html>

与其说这是一个需要解决方案的问题，不如说这只是程序的糟糕工程/结构。根据你使用程序的环境的性质来规划你的程序。在网页中，当你切换页面时，新页面会以全新的方式运行代码。

你要么必须学会在页面之间传输数据（URL中的GET变量可能对你有用），要么不要去一个新页面并用纯JS构建它。我建议后者。

无论哪种方式，这都是你计划如何运行你的程序的基本结构的问题。你基本上需要从中吸取教训，抹去它，然后重新开始，牢记这一教训。

最简单的方法是使用本地存储，它是绝大多数浏览器（包括IE8+）中可用的键/值存储。

保存数据：

localStorage.setItem('randomWord', 'cat');

加载数据：

localStorage.getItem('randomWord');

MDN：使用Web存储API

在呈现新页面时，您不会将状态（从上一页）传递给新页面。您需要有一些方法来保存当前会话中当前页面的状态（即随机生成的单词）。通过这种方式，您可以在进入下一页时访问会话中的变量。例如，在PHP中，可以将变量存储在会话关联数组中。因此，在登录系统的一般示例中，您可以通过以下操作让用户跨多个页面登录：

session_start();
$_SESSION['login'] = "1";
$_SESSION['userName'] = $uname;

通过这种方式，您可以检查用户是否跨多个页面登录。在您的情况下，当您需要跨多个页面检查数据时，这将是一个选项。当然，它需要像PHP或Python这样的服务器端语言的知识。我建议你学一个。

相关文章：