Return to Question

Additional information

Source Link

edited Aug 18, 2020 at 13:54

Following @sfdcfox's comments I replaced <apex:stylesheet /> and <apex:includeScript /> with vanilla HTML tags. At least these resources moved back into the correct location inside the tags. However, SF still keeps outputting sections of scripts and stylesheets both before and after the body tags.

The current output stands at:

<!DOCTYPE HTML>
<head><script src="/static/111213/js/perf/stub.js" type="text/javascript"></script><script src="/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript?rel=1597694166000" type="text/javascript"></script><script src="/static/111213/js/functions.js" type="text/javascript"></script><script src="/jslibrary/1595625414226/sfdc/main.js" type="text/javascript"></script><script src="/jslibrary/jslabels/1597696824000/en_US.js" type="text/javascript"></script><script src="/static/111213/desktop/desktopAjax.js" type="text/javascript"></script><script src="/static/111213/js/picklist4.js" type="text/javascript"></script><script src="/resource/1478908878000/jquery310min" type="text/javascript"></script><script src="/jslibrary/1586381828226/sfdc/VFState.js" type="text/javascript"></script><script src="/jslibrary/1589998732226/sfdc/NetworkTracking.js" type="text/javascript"></script><script>try{ NetworkTracking.init('/_ui/networks/tracking/NetworkTrackingServlet', 'network', '06641000001OIbR'); }catch(x){}try{ NetworkTracking.logPageView();}catch(x){}</script><script>(function(UITheme) {
    UITheme.getUITheme = function() { 
        return UserContext.uiTheme;
    };
}(window.UITheme = window.UITheme || {}));</script></head><span id="j_id0:j_id1"></span>

    <html>
    <head>
<meta HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
<meta HTTP-EQUIV="Expires" content="Mon, 01 Jan 1990 12:00:00 GMT" />

        <meta content="width=device-width, initial-scale=1.0" name="viewport" />
        
        <link href="/resource/****16000/FontAwesome4/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
        <link href="/resource/****31000/Bootstrap4/bootstrap-4.5.2-dist/css/bootstrap.min.css" rel="stylesheet" />
        <link href="/resource/****13000/AcadResources/InstApp.css" rel="stylesheet" />
        ....
        ........
    </head>
    
    <body>
    
        ...........
        ..............
        
        <script src="/resource/****44000/jQuery3/jquery-3.5.1.slim.min.js"></script>
        <script src="/resource/****58000/PopperJS2/popper.min.js"></script>
        <script src="/resource/****31000/Bootstrap4/bootstrap-4.5.2-dist/js/bootstrap.min.js"></script>     
        
    </body>
    </html><script type="text/javascript">Sfdc.onReady(function(){
    SfdcApp && SfdcApp.Visualforce && SfdcApp.Visualforce.VSManager && SfdcApp.Visualforce.VSManager.vfPrepareForms(["j_id0:j_id9"]);

});</script>

Just can't figure out what's causing the output of the extra <head> section BEFORE the <html> tag and likewise the additional tags after </html>.

Where am I going wrong?

The current output stands at:

<!DOCTYPE HTML>
<head><script src="/static/111213/js/perf/stub.js" type="text/javascript"></script><script src="/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript?rel=1597694166000" type="text/javascript"></script><script src="/static/111213/js/functions.js" type="text/javascript"></script><script src="/jslibrary/1595625414226/sfdc/main.js" type="text/javascript"></script><script src="/jslibrary/jslabels/1597696824000/en_US.js" type="text/javascript"></script><script src="/static/111213/desktop/desktopAjax.js" type="text/javascript"></script><script src="/static/111213/js/picklist4.js" type="text/javascript"></script><script src="/resource/1478908878000/jquery310min" type="text/javascript"></script><script src="/jslibrary/1586381828226/sfdc/VFState.js" type="text/javascript"></script><script src="/jslibrary/1589998732226/sfdc/NetworkTracking.js" type="text/javascript"></script><script>try{ NetworkTracking.init('/_ui/networks/tracking/NetworkTrackingServlet', 'network', '06641000001OIbR'); }catch(x){}try{ NetworkTracking.logPageView();}catch(x){}</script><script>(function(UITheme) {
    UITheme.getUITheme = function() { 
        return UserContext.uiTheme;
    };
}(window.UITheme = window.UITheme || {}));</script></head><span id="j_id0:j_id1"></span>

    <html>
    <head>
<meta HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
<meta HTTP-EQUIV="Expires" content="Mon, 01 Jan 1990 12:00:00 GMT" />

        <meta content="width=device-width, initial-scale=1.0" name="viewport" />
        
        <link href="/resource/****16000/FontAwesome4/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
        <link href="/resource/****31000/Bootstrap4/bootstrap-4.5.2-dist/css/bootstrap.min.css" rel="stylesheet" />
        <link href="/resource/****13000/AcadResources/InstApp.css" rel="stylesheet" />
        ....
        ........
    </head>
    
    <body>
    
        ...........
        ..............
        
        <script src="/resource/****44000/jQuery3/jquery-3.5.1.slim.min.js"></script>
        <script src="/resource/****58000/PopperJS2/popper.min.js"></script>
        <script src="/resource/****31000/Bootstrap4/bootstrap-4.5.2-dist/js/bootstrap.min.js"></script>     
        
    </body>
    </html><script type="text/javascript">Sfdc.onReady(function(){
    SfdcApp && SfdcApp.Visualforce && SfdcApp.Visualforce.VSManager && SfdcApp.Visualforce.VSManager.vfPrepareForms(["j_id0:j_id9"]);

});</script>

Just can't figure out what's causing the output of the extra <head> section BEFORE the <html> tag and likewise the additional tags after </html>.

Where am I going wrong?

Source Link

asked Aug 18, 2020 at 6:43

miCRoSCoPiC_eaRthLinG

Apex includeScript outputting scripts after </html> tag

I am using the loadOnReady="true" attribute of <apex:includeScript /> to defer loading of scripts till DOM rendering is complete.

Here's my VF page skeleton:

<apex:page doctype="html-5.0"
           applyHtmlTag="false"
           applyBodyTag="false"
           showHeader="false"
           sidebar="false"
           standardStylesheets="false"
           cache="false"
           id="example"
           title="Example Title"
           Controller="exampleController">

    <html>

    <head>
    
        <apex:stylesheet value="{!URLFOR($Resource.Bootstrap4,'/bootstrap.min.css')}"/>
    
    </head>
    
    <body>
    
        ....
        ......
        
        <!-- Just before BODY closing tag-->
        <apex:includeScript loadOnReady="true" value="{!URLFOR($Resource.jQuery3,'/jquery-3.5.1.slim.min.js')}"/>
        <apex:includeScript loadOnReady="true" value="{!URLFOR($Resource.PopperJS2,'/popper.min.js')}"/>
        <apex:includeScript loadOnReady="true" value="{!URLFOR($Resource.Bootstrap4,'/bootstrap.min.js')}"/>        
    
    </body>
    
    </html>
    
</apex:page>

This has a strange effect on the code of the rendered page. The inclusion of scripts is actually happening AFTER the closing HTML tag - which is semantically incorrect!!!

When I inspect the source of the rendered page, I see:

    </body>
    </html><script type="text/javascript">Sfdc.onReady(function(){
Sfdc.Resource.addJavaScripts(['/resource/****20000/jQuery3/jquery-3.5.1.slim.min.js','/resource/****19000/PopperJS2/popper.min.js','/resource/****14000/Bootstrap4/bootstrap.min.js']); SfdcApp && SfdcApp.Visualforce && SfdcApp.Visualforce.VSManager && SfdcApp.Visualforce.VSManager.vfPrepareForms(["loginPage:siteLogin:loginComponent:loginForm"]);

});</script>

Where am I going wrong?

Thank you.