xhr-check.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. /*
  2. * This script is used to provide feedback if the demo is not working correctly on the local file system due to the same origin policy.
  3. */
  4. (function() {
  5. var msg = null;
  6. var msgTemplate = '<div style="border: 1px solid #ff6666; background: #ffcccc; padding: 30px;">' +
  7. '<h1>SVGInject not working correctly</h1>' +
  8. '<h2>Don\'t worry: It\'s most likely because you are running this on your local file system.</h2>' +
  9. '<p>SVGInject works very well in any browser when run with a web server.</p>' +
  10. '<p>Due to the same origin policy for some browsers (Chrome, Safari), SVGs can not be loaded when run on the file system.</p>' +
  11. '<h2>How to get this to work:</h2>' +
  12. '<ul style="font-size: larger;">' +
  13. '<li>Run this with a Web Server</li>' +
  14. '<li>Use a Firefox browser</li>' +
  15. '</ul>' +
  16. '<p>There are also other possible solutions (--allow-file-access-from-files flag in Chrome) you might want to look for to run this example on the file system.</p>' +
  17. '</div>';
  18. function createElementFromHTML(htmlString) {
  19. var div = document.createElement('div');
  20. div.innerHTML = htmlString;
  21. return div.firstChild;
  22. }
  23. function showMessage() {
  24. msg = createElementFromHTML(msgTemplate);
  25. document.body.insertBefore(msg, document.body.firstChild);
  26. }
  27. var req = new XMLHttpRequest();
  28. req.onreadystatechange = function() {
  29. if (req.readyState == 4) {
  30. // readyState is DONE
  31. var status = req.status;
  32. if (status == 200) {
  33. // request status is OK
  34. } else {
  35. showMessage()
  36. }
  37. }
  38. };
  39. var script = document.querySelectorAll("script[src$='xhr-check.js']")[0];
  40. req.open('GET', script.getAttribute('src'), true);
  41. req.send();
  42. })();