1

I have a 3rd party script that displays some data on my site. When the script loads it breaks all of the JS on any page the script is in. I remove the script and my page works without issue.

Are there ways to prevent 3rd party scripts from interacting with my page in a way the breaks the page?

Notes:

  • I have no access to the 3rd party script to edit.
  • I am using jQuery for the scripts that are breaking. I have in place jQuery.noConflict yet it still breaks the page.
  • I have attempted to load the script in an iframe to see if that made a difference. It did not.
  • The script does write data to the page, mainly CSS and HTML

Note: The below code may contain references/links to drug content, mainly marijuana.

I am building a site for a medical marijuana dispensary. I am importing the menu of the dispensary from a site called WeedMaps. Their embed code looks like this:

<script type="text/javascript">var wmenu_id = 1111;</script> //The number correlates to the menu I need to pull, I have changed it in this question
<script type="text/javascript" src="http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js"></script>

When I use the above code the JS of my site breaks. How to I prevent my code from breaking when using 3rd party scripts over which I have no control.

UPDATE

Here is a JS Fiddle. The menu opens but doesn't close properly. Remove the script that is generating the menu from weedmaps and the menu works correctly. (The weedmaps menu script is in the bottom of the HTML panel.)

L84
  • 42,350
  • 55
  • 167
  • 243
  • 1
    Your question is a bit vague. Are there any errors in the console? What does the 3rd party script do? Where does it come from? – Evan Trimboli Jan 22 '13 at 22:01
  • @EvanTrimboli - No errors, and my question was a bit vague because it deals with a topic that is not necessarily safe for work. I am going to ask over on META SO to see if I can post more data and not break SO rules. – L84 Jan 22 '13 at 22:04
  • @Lynda, here you go: http://meta.stackexchange.com/questions/121312/se-policy-for-nsfw-links-in-questions – halfer Jan 22 '13 at 22:07
  • Ok, good luck. It's difficult to offer much more help without knowing details. – Evan Trimboli Jan 22 '13 at 22:07
  • You can always take a copy of the script (assuming the script itself is SFW) and host it somewhere temporary, then create an example of the problem on the temporary host. But in general I think if you add (NSFW) in the title you'll be fine - just make sure the question isn't so specific to you that it risks being closed as Too Localised. – halfer Jan 22 '13 at 22:09
  • @EvanTrimboli - Updated question. – L84 Jan 22 '13 at 22:16
  • 1
    @halfer - Thanks for the info, I updated question. – L84 Jan 22 '13 at 22:17
  • I've just set that script up in a JSFiddle ([see here](http://jsfiddle.net/hmVG6/)) and it tries to access a Google resource that returns a 400 error. So, it is possible that the script isn't well-written, and could use an update. – halfer Jan 22 '13 at 22:23
  • I've run a bit of jQuery code alongside it, and as far as I can tell, it still works: http://jsfiddle.net/hmVG6/2/ - and that's without invoking the no-conflict mode. Can you create a fiddle to demonstrate how your site is breaking, or give us some error details? – halfer Jan 22 '13 at 22:27
  • Yeah, the script is referring to a font name incorrectly surrounded by quotes - I doubt if that ever worked. Can you contact the host and ask them to fix it? Should be [this instead](http://fonts.googleapis.com/css?family=Luckiest%20Guy). – halfer Jan 22 '13 at 22:31
  • @halfer - I will be contacting them. I added a JS Fiddle with a menu that breaks when the script is being used. (See my question for the update.) – L84 Jan 22 '13 at 23:41
  • Long shot - [possibly related](http://bugs.jqueryui.com/ticket/8860)? I know that's UI and not core jQuery, but it sounds suspiciously similar to the problem here... – halfer Jan 23 '13 at 01:04

2 Answers2

1

Hmm, not having much luck. I'll add what I have, since it may trigger further ideas from you. However, in short, I think their script isn't written particularly well, and that they really do need to fix it on their end.

As it stands, Firefox shows this error when animating the menus:

TypeError: jQuery.easing[jQuery.easing.def] is not a function

This blog suggests that this occurs when the Easing plugin is loaded before jQuery. Fine, I thought - we just need to load the WeedMenu script after our jQuery has loaded. So I tried the following (with help from here):

$j.getScript('http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js');

That gave me this error:

A call to document.write() from an asynchronously-loaded external script was ignored.

Turns out that occurs as a result of the WM script using document.write, which is desperately out of date. So that lead me on to find crapLoader, which is meant to handle this sort of thing:

crapLoader.loadScript("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js", "menu-script");

Unfortunately that brings me back to the original Easing error.

Here's my fork - let me know if you find anything!

Community
  • 1
  • 1
halfer
  • 18,701
  • 13
  • 79
  • 158
1

The script is not well written, I was able to solve my issue by removing a line of code from the script. The link I provided list to a longer script. The script had this line of code:

try {
    b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), "function" != typeof wmenu_strains_callback && b("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu.js", !0)
} 

if I remove b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), then the script works and my page works. What was happening was the script was inserting jQuery into the bottom of my head and breaking the rest of my javascript.

L84
  • 42,350
  • 55
  • 167
  • 243
  • Glad you fixed it. Don't forget to send your changes to that site, so they can consider merging them into a future version. – halfer Jan 26 '13 at 09:39