Wix 自定义 javascript 仅在页面刷新时触发

Question

Working with Wix webite, i added a custom code with some javascript to change some elements. Basically strip commas and transform words to links.

Code works fine in my simple test page. The wix website though, only fires the js by reloading the page. I need it to fire on page first load.

`

window.onload = (event) => { 
 const mystring = document.querySelectorAll('#comp-id p span');
 for (const taglines of mystring) {
      const words = taglines.innerHTML.split(', ');
      for ( i = 0; i < words.length; i++) {
        var swords = words[i].replace(/\s+/g, '-').toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
        words[i] = `<a href="http://example.com/${swords}" class="menuintag">${words[i]}</a>`;
      }
      taglines.innerHTML = words.join(' ');
    }
};

`

tested:

 //window.onload = function() 
//  window.addEventListener("DOMContentLoaded", function()

i also tried directly in the built-in editor, mainpage.js

no success yet...

How can i do it please?

Answer 1

Within a Wix site, you'll need to use Velo APIs to work with page elements instead of standard JavaScript functions.

Take a look at their Hello World example to see how it works.

See the Velo API Reference . You'll want to start with the Wix Editor Elements ($w) section.

Answer 2

I've never used Wix before.

But Give this block a try. There are a few different onLoad methods for better backwards compatibility

function onLoad() { 
 const mystring = document.querySelectorAll('#comp-id p span');
  for (const taglines of mystring) {
       const words = taglines.innerHTML.split(', ');
       for ( i = 0; i < words.length; i++) {
         var swords = words[i].replace(/\s+/g, '-').toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
         words[i] = `<a href="http://example.com/${swords}" class="menuintag">${words[i]}</a>`;
      }
      taglines.innerHTML = words.join(' ');
    }
}


if (window.attachEvent) { window.attachEvent('onload', onLoad); }
else if (window.addEventListener) { window.addEventListener('load', onLoad, false); }
else { document.addEventListener('load', onLoad, false); }