Statische Ressource in der VisualForce-Seite

Question

Ich verwende Google Re Captcha auf meiner Visual Force-Seite wie folgt

<apex:page sidebar="false" showHeader="false">
    <apex:slds />    
    <html>  
        <head> 
            <script type="text/javascript">
            var verifyCallback = function(response) {
                parent.postMessage("formvalidated", "{!$Site.BaseSecureUrl}");
            }; 
            var onloadCallback = function() {                
                grecaptcha.render('html_element', {
                    'sitekey' :'XXXXXXXXXXXXXXXXX',
                    'callback' : verifyCallback,
                });
            };
            </script>
        </head>
        <body>
            <form action="?" method="POST">
                <div id="html_element"></div>
                <br/>
                <input type="submit" value="Submit" style="display:none"/>
            </form>
            <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async="" defer="">
            </script>
        </body>
    </html> 
</apex:page>

Der obige Code funktioniert einwandfrei.

Jetzt versuche ich zu verwenden, Static resourceanstatt die js URL in das Skript-Tag wie unten zu laden.

Das funktioniert nicht

<apex:includeScript value="{! $Resource.RecaptchaAPI}"/>

Ich habe diese URL https://www.google.com/recaptcha/api.jsim Browser aufgerufen und das js als gespeichert recaptchaApi.jsund die neue statische Ressource mit dem Namen wie folgt erstellt

Kannst du mir zeigen, was mir hier fehlt?

Answer 1

Durch das Laden der statischen Ressource (unter Verwendung des unten angegebenen Codes) weisen Sie die VF-Seite nicht speziell an, was nach dem Laden der JS-Datei geschehen oder ausgeführt werden soll.

<apex:includeScript value="{! $Resource.RecaptchaAPI}"/>

& ?onload=onloadCallback&render=explicitam Ende Ihrer Seiten-URL wird dies auch nicht tun (im Gegensatz zu dem Skript-Tag, in das ein explizites onloadAttribut eingebunden ist). Sie müssen Ihren Code also wie unten gezeigt aktualisieren.

<apex:page sidebar="false" showHeader="false">
    <apex:slds />
    <apex:includeScript value="{! $Resource.RecaptchaAPI }"/>
    <script type="text/javascript">
    grecaptcha.ready(function(){
        grecaptcha.render('html_element', {
            'sitekey' :'<Place your site key here>',
            'callback' : verifyCallback,
        });
    });
    
    var verifyCallback = function(response) {
        console.log('inside verifyCallback');
        parent.postMessage("formvalidated", "{!$Site.BaseSecureUrl}");
    };
    </script>
    <form action="?" method="POST">
        <div id="html_element"></div>
        <br/>
        <input type="submit" value="Submit" style="display:none"/>
    </form>
</apex:page>

grecaptcha.readyDie Funktion wird ausgeführt, nachdem die statische Ressource geladen und die Google Recaptcha-API bereit ist. Die an sie übergebene Rückruffunktion sollte verwendet werden, um den Rest der Logik zu verarbeiten.

Alternative Lösung: Sie können auch Folgendes tun (hier können Sieg-recaptchaTag-Attribute wiedata-sitekey& verwendendata-callback):

<apex:page sidebar="false" showHeader="false">
    <apex:slds />
    <apex:includeScript value="{! $Resource.RecaptchaAPI }"/>
    <script type="text/javascript">    
        function verifyCallback(response) {
            console.log('inside verifyCallback');
            parent.postMessage("formvalidated", "{!$Site.BaseSecureUrl}");
        };
    </script>
    <form action="?" method="POST">
        <div class="g-recaptcha" data-sitekey="<Place your site key here>" data-callback="verifyCallback"></div>
        <br/>
        <input type="submit" value="Submit" style="display:none"/>
    </form>
</apex:page>