0

As suggested here and exemplified here, rangy library can be used to highlight selected text.

I do not have direct access to the page I want to highlight some text, so I'm trying to load it dynamically:

var HLScripts=new Array(
'lib/log4javascript.js',
'src/js/core/core.js',
'src/js/core/dom.js',
'src/js/core/domrange.js',
'src/js/core/wrappedrange.js',
'src/js/core/wrappedselection.js',
'src/js/modules/rangy-serializer.js',
'src/js/modules/rangy-cssclassapplier.js',
'src/js/modules/rangy-selectionsaverestore.js',
'src/js/modules/rangy-highlighter.js'
)

for(var i=0; i<HLScripts.length; i++) {
var e=document.createElement('script');
e.type='text/javascript';
e.src='http://rangy.googlecode.com/svn/trunk/'+HLScripts[i];
document.body.appendChild(e);
}

However, when I call the init method rangy.init(); I obtain rangy is undefined. How can I correct this error?

Community
  • 1
  • 1
tic
  • 4,009
  • 15
  • 45
  • 86

1 Answers1

2

First, I'd recommend downloading a release build of Rangy and putting that on your server rather than linking directly to the files in the SVN trunk, which are not as stable as a proper release and are full of logging calls, which increase code size and harm performance and require log4javascript, which is itself fairly bulky.

Second, loading scripts dynamically like that will load them asynchronously, meaning that an individual script may finish loading and execute before previous scripts upon which it depends have finished loading. Script loading and getting dependencies right is a bit of a tricky area. I'm no expert in this field, but for what it's worth, I'd recommend using a script loader such as LABjs to do it.

Tim Down
  • 318,141
  • 75
  • 454
  • 536