Uncaught SyntaxError: Unexpected identifier - Webshare api

问题

I am trying to implement web share api of android chrome in jekyll posts page. Below is my code.

<script>
  document.querySelector('share-btn2').addEventListener('click', function() {
    console.log('clicked');
    if(navigator.share) {
      navigator.share({
        title: {{ page.title }},
        text: {{ page.content }},
        url: {{ site.url }}{{ page.url }}
      })
      .then(() => console.log('Success'))
      .catch((error) => console.log('Error sharing', error));
    }

  });

</script>

But I get an Uncaught SyntaxError: Unexpected identifier error in console on line title: {{ page.title }},. Please correct my code. thanks.

回答1:

It's seems that your javascript code is not processed by Jekyll.

Be sure to set a front matter in any file your want to be processed.

---
# even an empty front matter is ok
---
<script>
  document.querySelector('share-btn2').addEventListener('click', function() {
    console.log('clicked');
    if(navigator.share) {
      navigator.share({
        title: '{{ page.title }}',
        text: '{{ page.content }}',
        url: '{{ site.url }}{{ page.url }}'
      })
      .then(() => console.log('Success'))
      .catch((error) => console.log('Error sharing', error));
    }

  });

</script>

回答2:

The values for the share properties are essentially strings, not what you have supplied. This is from the Mozilla documentation:

    var sharePromise = window.navigator.share(data);

data = An object containing data to share. At least one of the following fields must be specified. Available options are:

url: A USVString representing a URL to be shared.
text: A USVString representing text to be shared.
title: A USVString representing the title to be shared.


    navigator.share({
      title: document.title,
      text: 'Hello World',
      url: 'https://developer.mozilla.org',
    }); // share the URL of MDN

did you mean:

  navigator.share({
    title: page.title,
    text: page.content,
    url: site.url + page.url
  });

来源：https://stackoverflow.com/questions/53977921/uncaught-syntaxerror-unexpected-identifier-webshare-api

标签

javascript

Jekyll