如何找出哪些脚本代码和/或插件在页面上的元素内呈现外观和功能？

Question

I've found a control on another webpage that I like. Assuming the site developers didn't build it from scratch, how do I determine what scripting framework and/or plugin they're using to transform and style it?

It's like a selection control of sorts in "bar form". It's on the realtor.com site here .

I've gotten the class names used for the parent container and its children, but searching for occurances of those in the javascript docs using Opera's dragonfly didn't yield any matches. How do I find out how this is being constructed???

Answer 1

There's no easy way that I know of that will tell you which code did render which elements. However you can go by deduction here. First of all, is the code rendered on the server or the client? An easy way to know for sure would be to inspect the initial source of the page and check if the elements are already present. If they are, it would mean that they were rendered server-side or they already existed in the initial static document.

As far as I can tell, the search bar markup doesn't seem to be generated client-side.

However, behaviour is certainly added client-side. I went through the code and from what I can tell they seem to be using a library that's also used on http://www.move.com/

The scripts of interest would be:

http://static.move.com/getstatic/getfile.ashx?chl=rdc&typ=js&vr=7.2.0.2340&fls=core/jquery/jquery-1.7.1.min,core/jquery/jquery.cookie.min,core/jquery/jquery.validate.min,core/jquery/jquery.json-1.3,core/jquery/jquery.ba-hashchange,core/legacy/legacy-move,core/legacy/movedialog.min,core/namespace,core/utils/underscore-min,core/utils/storage-util,core/movecore,core/cookie/cookies,core/tracking/edwtracking,core/tracking/clientevents,core/tracking/dwgtracking,core/tracking/omnituretracking,core/tracking/comscoretracking,map/hashmapping,core/utils/hash-util,core/utils/support,core/utils/captcha-util,s_code,seo/_seoparagraphs,core/ui/bootstrap

http://static.move.com/getstatic/getfile.ashx?chl=rdc&typ=js&vr=7.2.0.2340&fls=nopaindoubleload4v6,core/utils/jquery.dropkick-1.0.0,search/searchview/_topsearchview,geography/didyoumean/_didyoumean,modal/_modalview,search/_propertysearchcore,search/_partialviewcontainer,core/ui/bootstrappopovertooltip,core/utils/fb_connect_util,core/utils/rc4encrypt,registration/_registrationwidget,core/ui/slider,search/facets/_facetconcepta,geography/_predictivetext,core/ui/bootstraptabs,map/mapview/_mapview,map/map,search/listview/_resultscount,core/ui/bootstrap,search/featuredhomes/_featuredhomes,search/listview/_listviewsort,core/ui/_loadingindicator,search/listview/_listview,admedia/_admedia,search/listview/_resultsperpage,fcma/_fcma,propertydetail/_freemovingquotehandler,propertydetail/leadforms/_leadmodels,core/ui/datepickr,propertydetail/_movingcalculator,search/_trackpageview,search/_tracksearch,registration/_rdcmyitemswidget,admedia/_trackingpixel,instruments,pagetophat/_pagetophat,admedia/_a dmediamanagercore,breadcrumb/_breadcrumb,contentmanagement/_linkingmodule

They seem to be passing module names to the getfile.ashx page. You could probably eliminate the modules that seems useless for what you are looking for, which would make the code analysis easier.

Once you retrieved the sources, you can use http://jsbeautifier.org/ to format the code.

Have a look at everything namespaced in MoveCore and MoveLib . The library seems to be broken down by modules, where the page would register the modules it needs with MoveCore.Tracking.addService .

Please note that I doubt it's actually legal to "steal" the code and I would strongly advise you to roll your own solution instead.