javascript - Inline Js with Vue-Meta In Nuxt.js - Stack Overflow

admin管理员组

文章数量:1418690

Basically, Im using Nuxt 2.9.2, and trying to using innerHTML method to inline a Google Optimize script, but whenever i run npm run generate, the code transforms certain aspects even though __dangerouslyDisableSanitizers is whitelisting innerHTML..

This is my Script in Nuxt Config head object

script: [
    {
      innerHTML: `(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;})(window,document.documentElement,'async-hide','dataLayer', 500 , ${JSON.stringify(
        { [process.env.GOOGLE_OPTIMIZE_ID]: true }
      )})`
    }
  ],
  __dangerouslyDisableSanitizers: ['innerHTML']
},

Which renders out as the below, tried multiple different ways. could not get it to inline as expected

  !function(e,n,t,a,c,s,d){n.className+=" "+t,s.start=1*new Date,s.end=d=function(){n.className=n.className.replace(RegExp(" ?"+t),"")},(e[a]=e[a]||[]).hide=s,setTimeout(function(){d(),s.end=null},500),s.timeout=500}(window,document.documentElement,"async-hide","dataLayer",0,{"GTM-XXXXXX":!0})

should be

(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;})(window,document.documentElement,'async-hide','dataLayer', 500 , 'GTM-XXXXXX'': true }
        )})

Basically, Im using Nuxt 2.9.2, and trying to using innerHTML method to inline a Google Optimize script, but whenever i run npm run generate, the code transforms certain aspects even though __dangerouslyDisableSanitizers is whitelisting innerHTML..

This is my Script in Nuxt Config head object

script: [
    {
      innerHTML: `(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;})(window,document.documentElement,'async-hide','dataLayer', 500 , ${JSON.stringify(
        { [process.env.GOOGLE_OPTIMIZE_ID]: true }
      )})`
    }
  ],
  __dangerouslyDisableSanitizers: ['innerHTML']
},

Which renders out as the below, tried multiple different ways. could not get it to inline as expected

  !function(e,n,t,a,c,s,d){n.className+=" "+t,s.start=1*new Date,s.end=d=function(){n.className=n.className.replace(RegExp(" ?"+t),"")},(e[a]=e[a]||[]).hide=s,setTimeout(function(){d(),s.end=null},500),s.timeout=500}(window,document.documentElement,"async-hide","dataLayer",0,{"GTM-XXXXXX":!0})

should be

(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;})(window,document.documentElement,'async-hide','dataLayer', 500 , 'GTM-XXXXXX'': true }
        )})

• javascript
• vue.js
• nuxt.js
• vue-meta

Share Improve this question Follow edited Sep 24, 2019 at 8:21 Aihsan Majeed asked Sep 24, 2019 at 8:12 Aihsan MajeedAihsan Majeed 13522 silver badges1111 bronze badges 1

• 1 Did you try __dangerouslyDisableSanitizers: ['script'], ? – Mandeep Singh Commented Dec 19, 2019 at 7:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

        script: [
          {
            innerHTML: `window.MY_CONST = 'abcd1234'`,
            type: 'text/javascript',
            charset: 'utf-8',
          },
        ],
        __dangerouslyDisableSanitizers: ['script', 'innerHTML'],

本文标签： javascriptInline Js with VueMeta In NuxtjsStack Overflow