[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