How can I add pure js code to `index.html` #790

quanzaiyu · 2018-09-03T02:50:24Z

Bug report

Such as Baidu Statistics code，we usually add a piece of pure js code to index.html ：

<script> 
var _hmt = _hmt || []; 
(function() { 
var hm = document.createElement(“script”); 
hm.src = “//hm.baidu.com/hm.js?XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”; 
var s = document.getElementsByTagName(“script”)[0]; 
s.parentNode.insertBefore(hm, s); 
})(); 
</script>

How can I add those code to Vuepress ?

Version

Vuepress 0.14.2

Steps to reproduce

I try to add those code to config.js：

module.exports = {
  head: [ ['script', { ... }] ]
}

But I don't know how to do it.

Then I use a third part library vue-ba

install

yarn add vue-ba

then I modified enhanceApp.js :

import ba from 'vue-ba'

export default ({
  Vue,  options,  router,  siteData 
}) => {
  Vue.use(ba, 'xxxxxx')
}

when compiling，some error were outputed in console：

[10:47:08 AM] Compiled Server in 41s
[10:47:10 AM] Compiled Client in 43s
 FAIL   WAIT  Rendering static HTML...
Rendering page: /infoError rendering /:
 Visit ReferenceError: window is not defined
    at Object.<anonymous> (/Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-ba/dist/index.js:1:4368)
    at n (/Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-ba/dist/index.js:1:408)
    at /Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-ba/dist/index.js:1:791
    at /Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-ba/dist/index.js:1:801
    at /Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-ba/dist/index.js:1:146
    at Object.<anonymous> (/Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-ba/dist/index.js:1:285)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)https://yarnpkg.com/en/docs/cli/run
    at r (/Users/DYT/Desktop/www.xiaoyulive.top/node_modules/vue-server-renderer/build.js:8346:16)
    at Object.<anonymous> (webpack:/external "vue-ba":1:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
error Command failed with exit code 1.
error Command failed with exit code 1.
 for documentation about this command.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1

What is expected?

Expose window in enhanceApp.js, or a mechanism for adding pure js code.

What is actually happening?

Other relevant information

Your OS: macOS High Sierra 10.13.6
Node.js version: v10.6.0
Browser version: Chrome 68.0.3440.106
Is this a global or local install? local
Which package manager did you use for the install? yarn

The text was updated successfully, but these errors were encountered:

Tom-Julux · 2018-09-03T12:56:03Z

Working with the config.js-approach:

module.exports = {
    head: [ ['script', {}, `
        var _hmt = _hmt || []; 
        (function() { 
        var hm = document.createElement(“script”); 
        hm.src = “//hm.baidu.com/hm.js?XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”; 
        var s = document.getElementsByTagName(“script”)[0]; 
        s.parentNode.insertBefore(hm, s); 
        })(); 
    `]]
}

This works, because of the head-option's signature:

['tagname', attributesObject, contentString]

quanzaiyu · 2018-09-14T03:02:03Z

Thanks, it works.

rajaraodv · 2018-09-18T17:48:42Z

@ulivz Can we use similar technique to add it to the body?

yipcma · 2018-09-23T11:53:49Z

would love to know how it works for adding script to body.

anisabboud · 2019-04-17T12:01:07Z

@ulivz How to add pure javascript code to the <body> in index.html?

rajaraodv · 2019-04-17T17:35:10Z

@anisabboud See earlier comment, you need to do it in config.js

anisabboud · 2019-04-18T06:33:39Z

@rajaraodv config.js is a workaround that adds the script to the <head>.

I was wondering if there's a new way to add it to the <body> since @ulivz linked a long PR to this thread.

easeev · 2020-12-10T08:17:15Z

I was wondering if there's a new way to add it to the <body>

@ulivz any updates here, please?

arthabus · 2021-01-07T14:20:56Z

On possible approach to add script to body is using the same technique as @Tom-Julux showed:

module.exports = {
    head: [
        ['script', {id: "scriptImporter"}, `
        (function() { 
        var script = document.createElement("script"); 
        script.src = "path to your js script";
        setTimeout(() => document.body.append(script))
        })(); 
    `]
    ],

Note: since this code is running from head at which point body is not yet exist, we need to put the document.body.append inside setTimeout(fn. 0) so it waits one cycle before body is populated.

It's also possible to delete this script from the page if needed using the assigned id

ulivz added has workaround Has a workaround type: enhancement Request to enhance an existing feature labels Sep 4, 2018

ulivz added version: next Planned to do or already included in the next(1.0.0) version resolved labels Sep 16, 2018

ulivz mentioned this issue Sep 16, 2018

VuePress Next Alpha #815

Merged

ulivz closed this as completed in #815 Sep 26, 2018

samajammin mentioned this issue Aug 6, 2019

Matomo fix ethereum/ethereum-org-website#159

Merged

avivace mentioned this issue Sep 13, 2020

Anchor links not working in Chromium based browsers gbdev/pandocs#38

Closed

System-Glitch mentioned this issue Feb 22, 2021

Flickering from white to dark on load when having dark as default Danktuary/vuepress-theme-yuu#16

Closed

This was referenced Mar 27, 2024

adding the javascript to allow web stats gathering. AlmaLinux/wiki#375

Merged

module.experts support footer includes #3209

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I add pure js code to `index.html` #790

How can I add pure js code to `index.html` #790

quanzaiyu commented Sep 3, 2018 •

edited

Loading

Tom-Julux commented Sep 3, 2018

quanzaiyu commented Sep 14, 2018

rajaraodv commented Sep 18, 2018

yipcma commented Sep 23, 2018

anisabboud commented Apr 17, 2019

rajaraodv commented Apr 17, 2019

anisabboud commented Apr 18, 2019

easeev commented Dec 10, 2020

arthabus commented Jan 7, 2021 •

edited

Loading

How can I add pure js code to index.html #790

How can I add pure js code to index.html #790

Comments

quanzaiyu commented Sep 3, 2018 • edited Loading

Bug report

Version

Steps to reproduce

What is expected?

What is actually happening?

Other relevant information

Tom-Julux commented Sep 3, 2018

quanzaiyu commented Sep 14, 2018

rajaraodv commented Sep 18, 2018

yipcma commented Sep 23, 2018

anisabboud commented Apr 17, 2019

rajaraodv commented Apr 17, 2019

anisabboud commented Apr 18, 2019

easeev commented Dec 10, 2020

arthabus commented Jan 7, 2021 • edited Loading

How can I add pure js code to `index.html` #790

How can I add pure js code to `index.html` #790

quanzaiyu commented Sep 3, 2018 •

edited

Loading

arthabus commented Jan 7, 2021 •

edited

Loading