Javascript Recaptcha正在移动设备上工作,但不在桌面上
所以,我有一个,我在联系表中添加了一个recaptcha。我以前在多个网站上使用过recaptcha和联系人表单的代码,它在这些网站上运行得非常好。但是,出于某种原因,在这个网站上,recaptcha不能在该网站的桌面版本上运行 我已尝试删除旧的recaptcha并创建一个新的。那没用 我想可能是因为我在同一个页面上的移动版本和桌面版本的格式不同,这可能会导致错误。但是,当我删除其中一个recaptchas时,我得到了相同的结果——移动设备很好,而桌面则不行 我在不同的浏览器中尝试了一下,看看这是否是一个chrome错误,甚至更新了我的chrome——也不是这样 我检查了一下是否还有其他人有类似的问题,他们声称是这样的。但是我检查了我的文件,除了标题中的GoogleAPI链接之外,我看不到它将加载的任何地方 标题:Javascript Recaptcha正在移动设备上工作,但不在桌面上,javascript,html,css,recaptcha,captcha,Javascript,Html,Css,Recaptcha,Captcha,所以,我有一个,我在联系表中添加了一个recaptcha。我以前在多个网站上使用过recaptcha和联系人表单的代码,它在这些网站上运行得非常好。但是,出于某种原因,在这个网站上,recaptcha不能在该网站的桌面版本上运行 我已尝试删除旧的recaptcha并创建一个新的。那没用 我想可能是因为我在同一个页面上的移动版本和桌面版本的格式不同,这可能会导致错误。但是,当我删除其中一个recaptchas时,我得到了相同的结果——移动设备很好,而桌面则不行 我在不同的浏览器中尝试了一下,看看这
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
</head>
我的联系方式的recaptcha部分:
<div class = "row d-none d-sm-none d-md-block">
<div class = "col-md-6">
<div class="g-recaptcha" id = "captcha" name = "captcha" data-sitekey="SITE_KEY_HERE" style = "text-align:left;"></div>
</div>
<div class = "col-md-6">
<div class = "submit" style = "text-align: right;">
<button id = "submitForm" type="submit" name = "submit" class="btn btn-lg">Send Message</button>
</div>
</div>
</div>
<div class = "row d-inline-block d-sm-inline-block d-md-none">
<div class = "col-sm-12 text-center">
<div class="g-recaptcha" id = "captcha" name = "captcha" data-sitekey="SITE_KEY_HERE" style = "text-align:center;"></div>
</div>
</div>
<div class = "row d-block d-sm-block d-md-none">
<div class = "col-sm-12 text-center">
<div class = "submit">
<button id = "submitForm" type="submit" name = "submit" class="btn btn-lg">Send Message</button>
</div>
</div>
</div>
发送消息
发送消息
我希望用户能够看到一个正常的、recaptcha v2“我不是机器人”复选框,但我得到:
站点所有者错误:站点密钥的域无效
在桌面版本上。它在移动版上运行得非常好
更新:我甚至尝试为桌面版和移动版制作独特的recaptcha密钥,但这也不起作用。如果桌面版重新加载两次,这意味着可能会出现以下代码问题 class=“行d-inline-block d-sm-inline-block d-md-none”
您能将类更改为“visible xs”并查看它是否有效吗?您是否尝试过此处提到的显式渲染- 如上面链接中所述,将脚本标记更改为
然后添加一个回调函数,以逻辑方式呈现您想要的小部件(可能基于屏幕大小!),如下所示
var onloadCallback=函数(){
如果(屏幕宽度<600)
render('captcha-one',{//第一个验证码的id需要是验证码one
“站点密钥”:“您的站点密钥”
});
其他的
render('captcha-two',{//第二个验证码的id需要是验证码two
“站点密钥”:“您的站点密钥”
});
};
或者,您可能实际上只是根据前面提到的链接中的其他示例代码来渲染这两个示例代码。解决了它
我很抱歉,大家
原来我无意中添加了两个版本的联系人表单,但我没有意识到。我没有更新桌面上可见表单的站点密钥,而是继续编辑我认为自己拥有的表单的一个版本。。所以它一直显示为无效
我很抱歉,大家。我想这意味着有时逐行阅读代码是值得的。您需要使用站点密钥更新此部分
data sitekey=“SITE\u KEY\u HERE”
您正在使用两个验证码版本,一个用于移动设备,一个用于桌面。(使用相同的id),尝试使用不同的名称初始化两个版本。我想它会有用的)@9841pratik不,我试过了,但没有任何效果。@Rika是的,我显然在数据站点密钥部分设置了我的站点密钥,我只是不想发布我的站点密钥。但我向你保证,这是一样的。谢谢你。我现在就试试!如果这不起作用,我可能会尝试实现一个不可见的验证码。别忘了验证答案!每个人都会这样别担心