使用 PHP 自定义 URI 路由 - 搞乱 onclick javascript 调用答案

【问题标题】：Custom URI routing with PHP - messes up onclick javascript calls使用 PHP 自定义 URI 路由 - 搞乱 onclick javascript 调用
【发布时间】：2023-03-11 12:04:01
【问题描述】：

我正在使用 WAMP 堆栈，并且我从网上找到的代码拼凑了一个自定义路由功能。这个想法是允许用户将他们的（或任何）用户名添加到网站根 URL 的末尾，路由器 (index.php) 将提取该用户名并提供定制的主页。在 Firefox 中一切正常，但在 Google Chrome 中，路由似乎弄乱了浏览器中的 javascript 函数调用。因此 html 元素 onclick=someFunction() 在错误的 URL 中查找 someFunction()。

例如，假设用户浏览我的网站，并将他们的用户名附加到 url，例如 - www.example.com/@bruce。路由功能（见下面的 index.php）重定向到www.example.com/somePage.php?q=bruce。提供了为 Bruce 定制的页面，但是当 Bruce 单击带有 onclick 事件的元素时，Chrome 会抛出错误：Uncaught TypeError: someFunction() is not a function at HTMLInputElement.onclick (VM509 somePage.php?q=@bruce:44)

任何想法如何解决这个问题，以便我仍然可以路由我的用户？

索引.php：

<?php
//Router

    $uri = $_SERVER['REQUEST_URI'];
    $user = "";

    if(strpos($uri, "@") > 0) {
        $user = substr($uri, strpos($uri, "@"));
    }

    //do a validation on the user name before redirecting
    header('Location: somePage.php?q=' . $user);   //hardcode url here on deployment
    die();
?>

这是我的 .htaccess 文件，如果相关的话（我从关于 PHP 路由的 stackoverflow 答案中复制了这个）：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]

编辑以在我的 somePage.php 中添加脚本路径，以防导致问题：

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>SomePage</title>
    <link rel="stylesheet" href="./somePage.css">
    <script src="./somePage.js"></script>
</head>

【问题讨论】：

首先，您的网址之间似乎存在一些差异。在这里的问题中它变成q=bruce，但是在错误中它是q=@bruce。
然而这些问题似乎彼此无关，这是我的猜测。我认为重定向页面没有加载包含 someFunction 的 JS 文件
嗯，我没有注意到这种差异。 substr 函数不能像我预期的那样工作。

标签： javascript php apache .htaccess routing

【解决方案1】：

我要在这里狂猎*wink*。

Uncaught TypeError: someFunction() is not a function at HTMLInputElement.onclick (VM509 somePage.php?q=@bruce:44)

这意味着该函数不在全局范围内。这意味着具有此功能的脚本块不存在。

确保包含someFunction 的脚本块在somepage.php 中。

【讨论】：

嗯，它在 Firefox 中工作，所以在这种情况下它就在那里。为什么 Chrome 不检索它？

【解决方案2】：

事实证明，问题在于我无意中在我的页面上有几个元素具有相同的id。一旦我修复了它，它就开始在 Chrome 中正常工作。有趣的是它最初在 FF 而不是 Chrome 中工作。

【讨论】：