Solved

Importing an external javascript file into XSLT?

Posted on 2007-11-14
3
1,724 Views
Last Modified: 2013-11-18
I need to find out if it is possible to import an external javascript file into an xslt stylesheet.  We recently upgraded our search engine to a Google machine and I am trying to replicate our existing search page so the Google output matches.  Our existing site uses a DHTML/Javascript menu which has 4 rather large files that make it work.  I suppose I could take the content of those files and put it all in a CDATA section but we're talking about several hundred lines - on top of the 3000+ lines of the Google code.  Plus then I'd have to maintain 2 separate files for menu content.  Thus, I'd prefer to reference the external files and maintain one source - if possible.

The files I'm trying to call are:
<script type="text/javascript" src="/js/detectflash.js"></script>
<script type="text/javascript" src="/js/milonic_src.js"></script>      
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=/js/mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=/js/mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="/js/menu_data.js"></script>

Thanks in advance.
0
Comment
Question by:saabStory
  • 2
3 Comments
 
LVL 39

Accepted Solution

by:
abel earned 500 total points
ID: 20282105
Javascript is not special content, or would have a special meaning for XSLT. You can just treat the Javascript <script> tags as you would treat any other html tag inside your XSLT.

However, whether the javascript itself is actually called and parsed by the browser depends both on the browser and on the context (client-side or server-side transformation or an invocation by a processor instruction inside an XML file).

If you are doing a server side transformation, it is easy, just add the elements as literal result elements:

<xsl:template match="/">
   <html>
      <head>
          <script ..... />
          <script>
               if(ns4).write(.....
          </script>
      <body>
      .....
     <xsl:apply-templates select="somenode" />
      </body>
   </html>
 </xsl:template>

there are only a  couple of caveats that have mainly to do with escaping and/or automatic insertion of the wrong CDATA sequence inside the <script> with content in the case of XHTML. I can help you with that if a problem arises, but then I'll need to know the processor.

In the case of a client transformation, I'd recommend downloading (and reading about) prototype.js. An excellent toolchest for doing client side XML. Lookup the functions about running the javascript inside script tags after a transform. You'll have to feed the prototype.js functions the output XML DOM tree.

In the case of a PI, you are out of luck. The caveats and troubles are too high to be overcome easily. Well, it is possible, but you will really end up in browser compat-hell and in a far-from-trivial resolution. But a PI has so many other drawbacks, I assume you haven't even considered it for your situation ;)

Cheers,
-- Abel --
0
 

Author Comment

by:saabStory
ID: 20282494
Odd that I didn't get a notification of your answer.  I had actually found the answer on the menu manufacturers site.  There, they indicated that any Gecko based browsers were out of luck due to the document.write - i.e.
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=/js/mmenuns4.js><\/scr"+"ipt>");
  else _d.write("<scr"+"ipt type=text/javascript src=/js/mmenudom.js><\/scr"+"ipt>");

I can verify that these lines to indeed cause problems.  As you indicated, a solution would be nearly impossible due to differeing processors.  Since our browser base is steady at 20% non-IE, we might be better served to drive the results from the search into an iframe and eliminate a lot of hassle.
0
 
LVL 39

Expert Comment

by:abel
ID: 20282601
Hmm, you still haven't told what your processor and/or context is. From what you write, it looks like client-side. The document.write are a violation of the DOM object model, which is why they do not work on the (more conforming) Gecko browsers, Opera, Safari and Konqeror. In any case, when you see code that still uses "document.write", you should dismiss it as suspicious code and replace it with the DOM (or similar: innerHTML) equivalents.

Using document.write on a conforming XHTML document may yield surprising (jumping!) results when used in IE6 or IE7 which are very hard to track down.

However, funnily enough, the only "allowed" document.write is with script tags. But when written correctly, they work on any browser (see del.iciou.us site, which has a good framework for doing javcascript script-tags injection, which will give you a lot of freedom, esp. because you end up having only one <script> tag per html file).

If you are going to do any serious javascript (meaning: anything larger then 10 lines) you should consider prototype.js.

Thx for the points ;)

Cheers,
-- Abel --
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question