[TYPO3-UG Spain] Problema con el atributo async

Leticia Cuadrado leticiac at uax.es
Mon Jul 4 10:33:40 CEST 2016


Buenos días,

Quiero añadir el atributo async cuando cargo el JavaScript. He probado varias formas, pongo la parte del código correspondiente:

Opción1: Añadí la siguiente linea page.includeJSlibs.<array>.async = 1, se supone que esto afecta a TypoScript PAGE properties de includeJSLibs, includeJSFooterlibs, includeJS, includeJSFooter pero no sabia exactamente en que parte tenia que poner esta linea yo lo puse así

##############
#### PAGE ####
##############
page.includeJSlibs.<array>.async = 1
page = PAGE
page {
    typeNum = 0
    shortcutIcon = {$page.includePath.icons}favicon.ico

    // Abuse headTag to set X-UA-Compatible the original headTag will be set in config.htmlTag_stdWrap
    // This is sadly needed to get automatic baseurl setting to work
    #headTag = <meta http-equiv="X-UA-Compatible" content="{$page.meta.compatible}">
  headerData.5 = TEXT
  headerData.5.field = tx_jhopengraphprotocol_ogtitle // nav_title // title
  headerData.5.wrap = <title>|</title>
    
    meta {
        viewport = {$page.meta.viewport}
        robots = {$page.meta.robots}
        google = {$page.meta.google}
        apple-mobile-web-app-capable = {$page.meta.apple-mobile-web-app-capable}
        description = {$page.meta.description}
        description.override.field = description
        author = {$page.meta.author}
        author.override.field = author
        keywords = {$page.meta.keywords}
        keywords.override.field = keywords
        format-detection = telephone=no  
    }
    includeCSS {
       normalize = {$page.includePath.css}normalize.css
       theme = {$page.includePath.css}style.css
       responsive = {$page.includePath.css}responsive.css
       webfonts = {$page.includePath.css}MyFontsWebfontsKit.css
       fancybox = {$page.includePath.css}jquery.fancybox.css
       #jqueryUi = {$page.includePath.css}jquery-ui-1.8.7.custom.css
       slidercss =  {$page.includePath.css}flexslider.css
       bootstrap = {$page.includePath.css}bootstrap.min.css
       bootstrap-responsive = {$page.includePath.css}bootstrap-responsive.min.css
       loading = {$page.includePath.css}loading.css
    }
    includeJS{
      #jQuery  = http://code.jquery.com/jquery-latest.min.js
      jQuery  = EXT:yag/Resources/Public/Js/JQuery/jquery-1.8.3.min.js
      #jQuery  = EXT:yag/Resources/Public/Js/JQuery/jquery-1.12.0.min.js
      jqueryUi  = EXT:yag/Resources/Public/Js/JQuery/jquery-ui-1.8.10.custom.min.js
      google  = {$page.includePath.javascript}google.js
      dataLayer = {$page.includePath.javascript}dataLayer.js
      #bootstrap = http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
      bootstrap = {$page.includePath.javascript}bootstrap.min.js
      angular = https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js
      sanitize = {$page.includePath.javascript}angular-sanitize.min.js
      angular-filter = http://dcampus.uax.es/portal/central/themes/scripts/vendors/angular/angular-filter.min.js
      examenes = {$page.includePath.javascript}examenes.js
      efects = {$page.includePath.javascript}efects.js
    }

Opción 2: Dentro de includeJS probé con uno de los js que utilizo en este caso el último efects.js lo que hice fue añadir  efects.async = 1

##############
#### PAGE ####
##############

page = PAGE
page {
    typeNum = 0
    shortcutIcon = {$page.includePath.icons}favicon.ico

    // Abuse headTag to set X-UA-Compatible the original headTag will be set in config.htmlTag_stdWrap
    // This is sadly needed to get automatic baseurl setting to work
    #headTag = <meta http-equiv="X-UA-Compatible" content="{$page.meta.compatible}">
  headerData.5 = TEXT
  headerData.5.field = tx_jhopengraphprotocol_ogtitle // nav_title // title
  headerData.5.wrap = <title>|</title>
    
    meta {
        viewport = {$page.meta.viewport}
        robots = {$page.meta.robots}
        google = {$page.meta.google}
        apple-mobile-web-app-capable = {$page.meta.apple-mobile-web-app-capable}
        description = {$page.meta.description}
        description.override.field = description
        author = {$page.meta.author}
        author.override.field = author
        keywords = {$page.meta.keywords}
        keywords.override.field = keywords
        format-detection = telephone=no  
    }
    includeCSS {
       normalize = {$page.includePath.css}normalize.css
       theme = {$page.includePath.css}style.css
       responsive = {$page.includePath.css}responsive.css
       webfonts = {$page.includePath.css}MyFontsWebfontsKit.css
       fancybox = {$page.includePath.css}jquery.fancybox.css
       #jqueryUi = {$page.includePath.css}jquery-ui-1.8.7.custom.css
       slidercss =  {$page.includePath.css}flexslider.css
       bootstrap = {$page.includePath.css}bootstrap.min.css
       bootstrap-responsive = {$page.includePath.css}bootstrap-responsive.min.css
       loading = {$page.includePath.css}loading.css
    }
    includeJS{
      #jQuery  = http://code.jquery.com/jquery-latest.min.js
      jQuery  = EXT:yag/Resources/Public/Js/JQuery/jquery-1.8.3.min.js
      #jQuery  = EXT:yag/Resources/Public/Js/JQuery/jquery-1.12.0.min.js
      jqueryUi  = EXT:yag/Resources/Public/Js/JQuery/jquery-ui-1.8.10.custom.min.js
      google  = {$page.includePath.javascript}google.js
      dataLayer = {$page.includePath.javascript}dataLayer.js
      #bootstrap = http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
      bootstrap = {$page.includePath.javascript}bootstrap.min.js
      angular = https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js
      sanitize = {$page.includePath.javascript}angular-sanitize.min.js
      angular-filter = http://dcampus.uax.es/portal/central/themes/scripts/vendors/angular/angular-filter.min.js
      examenes = {$page.includePath.javascript}examenes.js
      efects = {$page.includePath.javascript}efects.js
      efects.async = 1
    }

Pero con ninguna de las dos opciones consigo que me ponga el atributo async.

He intentado buscar de que manera hace la construcción de la etiqueta <script ......> para meterle ahí directamente el atributo pero no se como construye typo3 las distintas etiquetas.

Alguien sabe como puedo hacer para poder incluir atributos nuevos en las distintas etiquetas? En este caso en concreto poner el atributo async a la etiqueta <script para que algo como esto <script async src="my.js">?

Muchas Gracias


More information about the TYPO3-UG-Spain mailing list