如何在Visualforce页面上的CSS中包含JAVASCRIPT

Question

我们已决定通过下面的HOTJAR片段跟踪我们的网站分析。 我们正在使用以CSS为标题的Visualforce页面。 我们希望将此JAVASCRIPT包含在此CSS中。

我们的HOTJAR跟踪脚本：

  <script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:748410,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script> 
</head>
</html>
    <apex:outputPanel layout="none">
        <script>
            $j = jQuery.noConflict();
            $j(document).ready(function(){
                $j('#portalheaderbot').hide();
            });
        </script>   

以下代码是CSS中的Header。 我们希望将其包括在内，以便每当有人单击页面时，HOTJAR都能跟踪流量。

<apex:page cache="false" showHeader="false" contentType="text/css"  controller="BSHeaderCSSCntl">

   /*Uncomment this for development*/
    @import url("{!URLFOR($Resource.PD_FLP360, 'style/bootstrap.css')}");
    @import url("{!URLFOR($Resource.PD_FLP360, 'style/main.css')}");


/*Uncomment this before deploying to prod.*/
/*    @import url("{!URLFOR($Resource.PD_FLP360, 'style/bootstrap.min.css')}");
    @import url("{!URLFOR($Resource.PD_FLP360, 'style/main.min.css')}");*/

    @import url("{!URLFOR($Resource.PD_FLP360, 'style/font-awesome.min.css')}");
    /* Hide SFDC stock communities components */
    .bPageHeader {
        display: none;
    }
    #tabContainer {
        display: none;
    }
    #sidebarCell {
        display:none;
    }
    /* Override to fix display of Chatter forms. Specific targetting to override computed styles.*/
    .chatterPage, .profilePage, .zen-bodyInner {
        font-size: 14px; 
    }
    .chatterPage h3, .profilePage h3, .chatterPage legend, .profilePage legend, .pollquestion{
        font-size: 14px;
    }
    .userProfilePage .vfButtonBar a.editLink img {
        padding: 0px;
    }
    .zen-navigation {
        height: 52px !important;
    }
    .uploadFile {
        height: 52px !important;
    }
    .bottomBar{
         height: 49px !important;
    }
    .zen-data table {
        -webkit-border-horizontal-spacing: 0px;
        -webkit-border-vertical-spacing: 0px;
        border-bottom-color: rgb(153, 153, 153);
        border-bottom-style: none;
        border-bottom-width: 0px;
        border-collapse: collapse;
        border-image-outset: 0px;
        border-image-repeat: stretch;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-width: 1;
        border-left-color: rgb(153, 153, 153);
        border-left-style: none;
        border-left-width: 0px;
        border-right-color: rgb(153, 153, 153);
        border-right-style: none;
        border-right-width: 0px;
        border-top-color: rgb(224, 224, 224);
        border-top-style: solid;
        border-top-width: 1px;
        color: rgb(153, 153, 153);
        display: table;
        font-family: arial, helvetica, clean, sans-serif;
        font-size: 12px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: normal;
        table-layout: fixed;
        text-align: left;
        zoom: 1;
    }
    .feedcontainer {
        max-width: 100% !important;
    }

    .threecolumn, .userProfilePage {
        width: 100%;
    }
    .threecolumn .mainContent .lowerMainContent {
        width: 100%;
    }
    .threecolumn .mainContent, .profilePage.userProfilePage .mainContent {
        width: initial;
    }
    .threecolumn .centerContent, .userProfilePage .centerContent {
        width: 72%;
    }
    .chatterPage .threecolumn .rightContent, .chatterPage .userProfilePage .rightContent { 
        display: none;
    }
    .userProfilePage .headerContent {
        width: auto !important;
    }

    /* Hide default stock page title */
    .bPageTitle {
        display:none;
    }
    /* Override default background on page blocks and related lists */
    .bPageBlock.brandSecondaryBrd.secondaryPalette, .bPageBlock.bEditBlock.brandSecondaryBrd {
        border: 0;
        background-color: transparent;
    }
    /* Override font size for stock pages */
    .outerNoSidebar, #bodyTable {
        font-size: 14px;
    }
    #bodyTable { /* Fix for DownlineMap rendering in FF */
        table-layout: fixed;
    }

    /* Custom code from Custom Settings */
    {!cssSettings.Custom_CSS__c}

    /* Additional custom code */


    /* Override heading display format */
    #fl-pagetitle {
        white-space: nowrap;
    }
    /* Override modal popup look and feel */
    .modal-title {
        color: rgb(218, 157, 39);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
    }    
    .modal-content {
        border-radius: 0px;
    }
    /* Fix bottom padding */
    .panel {
        /*padding: 13px 13px 13px 13px;*/
    }

    /* Fix header display */
    #bootstrap-body {
        margin-top: 100px;              
    }


    #publishersharebutton {
        background-attachment: scroll;
        background-clip: border-box;
        background-color: #C9920E;
        background-image: none;
        background-origin: padding-box;
        background-position: 0% 0%;
        background-repeat: repeat;
        background-size: auto;
        border-bottom-color: #ce9423;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-collapse: collapse;
        border-left-color: #ce9423;
        border-left-style: none;
        border-left-width: 0px;
        border-right-color: #ce9423;
        border-right-style: solid;
        border-right-width: 1px;
        border-top-color: #ce9423;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-top-style: none;
        border-top-width: 0px;
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        cursor: pointer;
        display: block;
        float: right;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 13px;
        font-weight: 300;
        line-height: 18.699979782104492px;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        outline-color: rgb(255, 255, 255);
        outline-style: none;
        outline-width: 0px;
        padding-bottom: 6px;
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 6px;
        text-align: left;
        text-decoration: none solid rgb(255, 255, 255);
        box-shadow: none;
        -webkit-box-shadow: none;
    }

    .publishercontainer.defaultState #publishersharebutton:hover, .publishercontainer.defaultState #publishersharebutton:active, .publishercontainer.defaultState #publishersharebutton:focus, .publishercontainer.defaultState #publishersharebutton.onHover {
        background-color: #C9920E;
        background-image: -ms-linear-gradient(top,#C9920E 0,#C9920E 100%);
        background-image: -moz-linear-gradient(top,#C9920E 0,#C9920E 100%);
        background-image: -webkit-linear-gradient(top,#C9920E 0,#C9920E 100%);
        background-image: linear-gradient(top,#C9920E 0,#C9920E 100%);
        border: 1px solid #ce9423;
    }

    #bootstrap-body ul li {
        margin-left: 0px;
    }
    #bootstrap-body .site-title { // Override site title for Chatter page
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        display: inline;
        font-family: 'Helvetica Neue', Helvetca, Arial, sans-serif;
        font-size: 49px;
        font-weight: bold;
        height: auto;
        letter-spacing: -1px;
        line-height: 53.900001525878906px;
        margin-bottom: 10px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 20px;
        padding-bottom: 60px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 40px;
        text-shadow: rgb(34, 34, 34) 2px 2px 5px;
        width: auto;
    }
    /* Hide dropdown box on right hand side of Chatter */
    #moderatorMutton{
        display: none;
    }
    /* Text wrapping for long names */
    #profile-name {
        word-wrap: break-word;
    }
    /* Hide contentWrapper as this interferes with min page width */
    #contentWrapper, .zen-page {
        display: none;
    }
    #site-header{
        padding-top: 35px;
    }

    /* Override size of list view so that it renders correctly on small screens */
    .listBody, .x-grid3, .x-grid-panel, .x-panel-body-noheader,  .x-grid3-scroller {
        min-height: 300px;
    }

    /* Widget header */
    .panel-heading span.wdgHeader {
        display: table;
    }
    #fchArea{
        overflow: scroll;
        height: 800px;
    }
    <!-- Hotjar Tracking Code for www.foreverliving.com -->

</apex:page>

Answer 1

您不能包含CSS中的JS。 您唯一可以做的就是声明某种背景图片或类似图片，这会向跟踪器创建一个请求，例如：

body:after {
  content: '';
  background-image: url(/path/to/tracker);
  width: 1px;
  height: 1px;
  position: absolute;
  left: -1px;
  top: -1px;
  display: block;
}

但是请注意，css将被缓存，因此您可能需要类似以下的URL：

/path/to/tracker?t=<timestamp>

从而需要在每个页面请求上生成时间戳。