Javascript 代码仅在空缓存和硬重新加载时有效答案

【问题标题】：Javascript code only works when Empty Cache and Hard ReloadJavascript 代码仅在空缓存和硬重新加载时有效
【发布时间】：2020-09-15 05:32:07
【问题描述】：

我正在向 woocommerce wordpress 网站添加 javascript 代码。

代码很简单。作用是，当用户单击结帐页面的 div 区域时，代码也会使其单击提交按钮。

我所做的就是将此代码 php 添加到我的 functions.php 文件中：

add_action("wp_enqueue_scripts", "jm_insertar_js3");
    function jm_insertar_js3(){
        if (is_checkout()){
            wp_register_script('miscript3', get_stylesheet_directory_uri(). '/script3.js', array('jquery'), microtime(true), true );
            wp_enqueue_script('miscript3');
        }
    }

然后，我创建了这个文件（script3.js）：

window.onload = function(){
    var div3 = document.querySelectorAll('div.mp-row-checkout');
    for (var i = 0; i < div3.length; i++) {
        div3[i].onclick = function() {
        document.getElementById("place_order").click();
        }
    }
}

事实上，当我在浏览器控制台中尝试这段代码时：

    var div3 = document.querySelectorAll('div.mp-row-checkout');
    for (var i = 0; i < div3.length; i++) {
        div3[i].onclick = function() {
        document.getElementById("place_order").click();
        }
    }

一切都很完美。

问题是，当我尝试代码时，通常什么都没有发生（当我单击 div 区域时，代码不会运行），我必须清空缓存并硬重新加载才能使其工作。我只是不知道为什么或如何解决这个问题。

我禁用所有类型的缓存服务器端和网站端。我正在从隐身标签进行测试以避免缓存。最后，我在文件版本中添加了时间戳（microtime(true)），以避免浏览器缓存，问题仍然存在。

我不是程序员，所以任何信息都会有所帮助。

提前致谢。

【问题讨论】：

所有浏览器都会出现这种情况吗？我觉得这可能是避免点击劫持的安全功能。你能检查一下“place_order”点击执行了什么函数并直接执行吗？
您好，感谢您的回复。我也遇到了 Firefox 的问题，但在这种情况下，即使不刷新页面也可以。 place_order 是提交表单（结帐）并重定向到支付网关页面的按钮。对不起，我在回答你的问题吗？我是新手。
部分:) 我的意思是：举个例子（我知道你说它会提交）：如果按钮点击运行一个js函数myClick()而不是调用document.getElementById("place_order").click();你可以直接调用我的点击（）。因此，在您的情况下，请直接提交表单。只需运行document.yourForm.submit();，其中 yourform 是表单的name 属性

标签： javascript php wordpress caching woocommerce

【解决方案1】：

用于防止浏览器缓存 js 文件。我们可以添加一个查询字符串。喜欢

/script3.js?qid=currentTimeStamp

【讨论】：

您好，感谢您的回复。我这样做了，在这一行：wp_register_script('miscript3', get_stylesheet_directory_uri(). '/script3.js', array('jquery'), microtime(true), true ); microtime(true) 但问题仍然存在。
这只是一个建议。尝试将您的代码添加到下面的 onload 事件中。 window.addEventListener('DOMContentLoaded', (event) => { // 你的代码 });

【解决方案2】：

我决定更改触发事件。 window.onload 会产生问题。

最终的 JS 文件（script3.js）：

var div3 = document.querySelectorAll('div.woocommerce-billing-fields, input.input-text ');
for (var i = 0; i < div3.length; i++) {
    div3[i].onclick = function() {
        var idNuevo = document.getElementById("jm-mp-row-checkout");
        if (!idNuevo) {
            document.getElementsByClassName("mp-row-checkout")[0].setAttribute("id", "jm-mp-row-checkout");
            document.getElementById("jm-mp-row-checkout").addEventListener("click", myFunctionJM2);
            function myFunctionJM2() {
                document.getElementById("place_order").click();
            }
        }
    }
}

【讨论】：