Kirby Kirby - 26 days ago 6
Javascript Question

My addthis toolbox JavaScript widget not present on mobile device

I'm using Ionic v1 and testing in Chrome (ionic serve) and View App (ionic upload).

I included this script in my index.html

<script src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=foo&async=1"></script>


And added the https://github.com/thisissoon/angular-addthis directive.

<sn-addthis-toolbox class="addthis_custom_sharing"
data-share="{
title: thing.title,
url: 'https://myurl/' + thing.id,
description: 'Check out my thing.'
}">
<a href class="addthis_button_email"></a>
<a href class="addthis_button_facebook"></a>
<a href class="addthis_button_twitter"></a>
<a href class="addthis_button_google_plusone_share"></a>
</sn-addthis-toolbox>


When viewing my ionic app in Chrome or firefox everything looks great. When i push to Ionic view my addthis buttons are missing. In Chrome Dev Tools, things look great with any responsive view or device.

Any direction would be helpful here. How would i see error messages in Ionic view?

Why is the addthis.com js widget not working on mobile device?

TIA.

EDIT: I added the https and that got things a step further. (thanks to adamdport)

Now seeing Failed to load file://m.addthisedge.com/live/boost/foo/_ate.track.config_resp resource: NET ERR_FILE_NOT_FOUND

and

Uncaught TypeError: Cannot read property 'split' of null
at r (https://s7.addthis.com/js/300/addthis_widget.js:2:44431)
at e.exports (https://s7.addthis.com/js/300/addthis_widget.js:2:211271)
at https://s7.addthis.com/js/300/addthis_widget.js:2:224158
at https://s7.addthis.com/js/300/addthis_widget.js:2:361724
at o (https://s7.addthis.com/js/300/addthis_widget.js:2:223353)
at https://s7.addthis.com/js/300/addthis_widget.js:2:215504
at HTMLDocument.onReady (https://s7.addthis.com/js/300/addthis_widget.js:2:214257)

on addthis_widget.js line 2

FINAL EDIT and solution: The best way i learned to solve this problem was to hook up my Nexus 6p via usb, enable usb debugging, and https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Answer

I resolved your original question regarding why your script wasn't loading: it involved your usage of // and switching between http and https. If your Ionic URL uses https://, the // in your script src will try to also retrieve your script using https, and it might not load.

Since you've edited, I've pointed out that file:// will only work on your local file system. If you try to reference it from a server, it will still try to load resources from the client's machine.

If you need further help, I'd suggest posting another question.