返回 JavaScript 值不会在 div 元素内呈现

Question

这是一个基本问题（再次发布，因为在我更新 the question 后它没有重新打开）。但我在 SO 上找不到任何重复项。

这是我打算在不同页面上的项目中使用的脚本。目的是将span 元素中显示的默认ID 覆盖为来自URL 参数session_order 的订单号。这不会影响任何事情，只会增强我项目的用户体验。

scripts.js（加载在标头中）：

function get_url_parameter(url, parameter) {
    var url = new URL(url);
    return url.searchParams.get(parameter);
}

在我的 HTML 模板中，我以这种方式调用函数，

<div onload="this.innerHTML = get_url_parameter(window.location.href, 'session_order');">24</div>

也试过这个，

<div><script type="text/javascript">document.write(get_url_parameter(window.location.href, 'session_order'));</script></div>

当页面被渲染时，没有任何变化。对于第一种情况，控制台中没有错误或警告。

对于第二种情况，控制台记录了错误Uncaught ReferenceError: get_url_parameter is not defined，尽管script.js 在div 元素之前加载（没有任何错误）。

通常，我会在服务器端使用 Flask 执行此操作，但我正在尝试 JavaScript（我是 JavaScript 新手），因为它只是一个 UX 增强。

我错过了什么？

Answer 1

试试这个：

// This is commented because it can't be tested inside the stackoverflow editor
//const url = window.location.href;
const url = 'https://example.com?session_order=13';

function get_url_parameter(url, parameter) {
    const u = new URL(url);
    return u.searchParams.get(parameter);
}

window.onload = function() {
  const el = document.getElementById('sessionOrder');
  const val = get_url_parameter(url, 'session_order');
  if (val) {
    el.innerHTML = val;
  }
}

<span id="sessionOrder">24</span>

定义获取 URL 参数所需的函数，然后在窗口加载事件中，获取 URL 参数并更新元素。

Answer 2

给你。尽量远离使用 document.write 的内联脚本。

function get_url_parameter(url, parameter) {
    var url = new URL(url);
    return url.searchParams.get(parameter);
}

window.addEventListener('load', function() {
  const url = 'https://yourpagesdomain.name/?session_order=hello'; //window.location.href;
  
  const sessionOrder = get_url_parameter(url, 'session_order');
  document.getElementById('sessionOrder').innerText = sessionOrder;
  
});

<div id="sessionOrder"></div>

Answer 3

标记和脚本的顺序很重要...

<div></div>

<script>
function get_url_parameter(url, parameter) {
    var url = new URL(url);
    return url.searchParams.get(parameter);
}
</script>

<script>
document.querySelector('div').innerHTML = get_url_parameter('https://example.com?session_order=2', 'session_order');
</script>