Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

怎么让评论区的验证码插件在启用pjax时保证加载 #1044

Open
Deepseaon opened this issue Jan 9, 2025 · 6 comments
Open

怎么让评论区的验证码插件在启用pjax时保证加载 #1044

Deepseaon opened this issue Jan 9, 2025 · 6 comments
Labels
help help

Comments

@Deepseaon
Copy link

大致范围:

pjax加载

具体行为描述:

,评论区不能加载出来验证码必须刷新

尝试:
尝试把cf turnstile的js地址添加进pjax后仍需加载的资源里,页面的验证码框体依然不能出现,看源代码那一部分没有正常加载
配置与环境:

  • 问题页面:(如果有,请提供一个触发此问题的页面链接)

截图(若有)

补充信息:

@Deepseaon Deepseaon added the help help label Jan 9, 2025
Copy link

github-actions bot commented Jan 9, 2025

@Deepsea-CN,感谢你给 sakurairo 提出了 issue。ヾ(≧▽≦*)o
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

Copy link

github-actions bot commented Jan 9, 2025

任何人都可以处理此问题。
请务必在您的 pull request 中引用此问题。
感谢你的贡献! (o゜▽゜)o☆

@Sualiu
Copy link
Contributor

Sualiu commented Jan 9, 2025

主题这里的pjax回调机制似乎没有写好,我看了 cloudfare turnstile docs 相关文档

cloudafare 推荐使用的 js 外链是 https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback,示例的 js 方法是:

window.onloadTurnstileCallback = function () {
  turnstile.render("#example-container", {
    sitekey: "<YOUR_SITE_KEY>",
    callback: function (token) {
      console.log(`Challenge Success ${token}`);
    },
  });
};

但很不幸的是,主题相关的pjax回调方法不能识别 ?onload=onloadTurnstileCallback 参数。这意味着 js 无法自动调用 window.onloadTurnstileCallback ,也就无法加载组件。且主题无自定义额外回调函数功能。

不过您也可以这样做绕过该限制:
在主题HTML header 中添加该 js 方法:

<script>
function initTurnstile() {
    turnstile.render("#example-container", {
        sitekey: "<YOUR_SITE_KEY>",
        callback: function (token) {
            console.log(`Challenge Success ${token}`);
        },
    });
}

document.addEventListener('DOMContentLoaded', function() {
    loadTurnstile();
});

function loadTurnstile() {
    const oldScript = document.querySelector('script[src*="turnstile/v0/api.js"]');
    if (oldScript) {
        oldScript.remove();
    }

    const script = document.createElement('script');
    script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
    script.async = true;
    
    script.onload = function() {
        initTurnstile();
    };
    
    document.body.appendChild(script);
}
</script>

另外在主题根目录的 header.php 115行左右手动添加以下回调方法:

    if (typeof turnstile !== 'undefined') {
        turnstile.remove('#example-container');
    }
    loadTurnstile();

@Sualiu
Copy link
Contributor

Sualiu commented Jan 9, 2025

我认为是时候完善主题的PJAX回调了(
不如就是屏幕前的你吧

@mirai-mamori
Copy link
Owner

mirai-mamori commented Jan 9, 2025 via email

@KotoriK
Copy link
Collaborator

KotoriK commented Jan 20, 2025

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help help
Projects
None yet
Development

No branches or pull requests

4 participants