javascript - 未捕获的错误：reCAPTCHA 已在此元素中呈现
问题描述
我正在尝试将多个验证码放在单个 vf 页面中。这是用visualforce组件编写的。加载时我只能看到一个验证码。当我完成检查元素时，我收到了这个错误：
音频组件：
<apex:component >
<apex:attribute type="CmpResult" name="recaptaReslt" required="true" description="Show or Hide the button" assignTo="{!reslt}"/>
<head>
<apex:slds />
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('theCAPTCHA', {
'sitekey' : '6Lecb0AUAAAAADqGh7PRcKG1tmB2EChkJhObgdpF',
'callback' : verifyCallback,
'expired-callback' : expiredCall,
'theme' : 'light'
});
};
var verifyCallback = function(response) {
if (response == ""){
}
else{
validate(response);
}
}
var expiredCall = function() {
expireVerification();
}
</script>
</head>
<body>
<div class="slds-scope">
<apex:form>
<div id="theCAPTCHA" class="g-recaptcha" style="transform: scale(0.74);transform-origin: 0 0;-webkit-transform:scale(0.74);-webkit-transform-origin: 0 0"></div>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
<apex:actionFunction name="validate" action="{!verifyResponse}" reRender="enableButton">
<apex:param name="firstParam" assignTo="{!tok}" value="" />
</apex:actionFunction>
<apex:actionFunction name="expireVerification" action="{!expireToken}" reRender="disableButton"/>
</apex:form>
</div>
</body>
</apex:component>