Geek Answers Handbook

How to check javascript widget correctly?

So, I wrote a small javascript widget. All the user has to do is insert the script tag on the page, and right below it I insert the div with all the content that the user requested.

Many sites do things like Twitter, Delicious, and even StackOverflow.

I am wondering how to check this widget so that it works correctly on every web page. I do not use iframes, so I really want to make sure that this code will work if you insert most places. I know that it looks the same in all browsers.

Suggestions? Or should I just build a hundred web pages and insert my script tag and see if it works? I hope there is an easier way than this.

+6
javascript testing
source share
3 answers

Once you confirm that your javascript works with a cross browser in a controlled environment, here are some things that can cause problems when used on a real website:

CSS

  • You are using a CSS class that is already being used (for another purpose) by the target website.
  • You are using positioning that may interfere with the CSS site.
  • The elements you use are created using the CSS site (you can use some kind of "reset" CSS, this applies only to your widget)

HTML

  • You create elements with the same id attribute as the element that already exists on the website
  • You specify a name attribute that is already in use (while name can be used for multiple elements, you cannot expect this)

Javascript

  • What is the expected behavior without javascript enabled? If your script creates everything, is it acceptable to be present without JS?
+1
source share

At the very beginning, you should make sure that your widget works for the following test cases. I am sure that then it will work on all web pages -

  • http / https . There should be no warnings for HTTPS pages for unencrypted content.
  • <script> / <no- ​​script> : What if JavaScript is disabled? Is your widget still visible?
  • What happens when third-party cookies are disabled? Is your widget still working?
  • Layout limitations: when the size of the parent is smaller than your widget. Does your widget overflow the specified size and destroy the owners page?
+1
source share

Keeping all your Javascripts under a namespace (global object) with a very unique name, you should be fine. Alternatively, you can simply use the anonymous function if you just want to print something.

A similar question: How to avoid name clashes in JavaScript widgets

0
source share

More articles:


All Articles