Rewrite match a url in a dhtml script

**weegillis** · #1 (**permalink**) 08-31-2009, 09:06 PM

A Javascript question:

I'd like as a first option (scripted) to be able to open PDF and external links in a new window, and have as a fall back option to open a download dialog for PDF files.

The rewrite match is giving me some trouble, can anyone help, please?

This is what I'm working with so far:

Code:

Javascript: dhtml.js

// v0.2
// dependency: attr(), addEvent()
// x is id value of container
// all anchors go into array
function newWindow(x) {
 if(!document.getElementById || !document.getElementsByTagName) return;
 if(!document.getElementById(x)) return;
 dx=document.getElementById(x);
 an=dx.getElementsByTagName('a');
 for(var i=0,n=an.length,url;i<n;i++) {
/*
=> rewrite match an[i] => 'download.php?file=' + $file => '' + $file
*/
  str="window.open('"+an[i].href+"','newWindow','height=480,width=640,status=yes,resizable=yes,scrollbars=yes,toolbar=yes,location=yes,menubar=yes');return false;";
  an[i].setAttributeNode(attr('onclick',str));
  an[i].setAttributeNode(attr('target','_blank'));
 };
};

// Attribute constructor
function attr(x,y){
 var z = document.createAttribute(x);
     z.nodeValue = y;
 return z;
};

/*
 echo "Required: 'window.load' event handler such as, "
 echo "addEvent(), "
 echo "by Dean Edwards."
*/

HTML Code:

<head>
.
.
<script type="text/javascript" src="/js/dhtml.js"></script>
</head>

<body>
.
.
.
<div id="extra">
<p class="pdf"><a href="download php?file=brochure.pdf" title="Printable .., PDF"><span>Brochure</span></a></p>
<p class="pdf"><a href="download php?file=calendar.pdf" title="Printable .., PDF"><span>Calendar</span></a></p>
<p class="pdf"><a href="download php?file=newsletter.pdf" title="Printable .., PDF"><span>Newsletter</span></a></p>
<p class="adobe"><a title="adobe.com" href="#example.com"><span>Get Adobe Reader</span></a></p>
</div>
.
.
.
<script type="text/javascript"><!--
addEvent(window,"load",function(){newWindow('extra')});
//--></script>
</body>

If scripts are running, the href will be just the file name, if not, the url will include the download.php page with file name in query string (default code).

I also plan to rewrite the title attributes to read "Open PDF in new window."

class="pdf" gets a PDF icon, and adobe a logo.

Any advice will be appreciated. Thanks.

**weegillis** · #2 (**permalink**) 08-31-2009, 11:08 PM

Well, I didn't give up and found my error, or at least another way to make a regular expression work.

Does this look clunky?

Code:

javascript


function newWindow(x) {
 if(!document.getElementById || !document.getElementsByTagName) return;
 if(!document.getElementById(x)) return;
 dx=document.getElementById(x);
 an=dx.getElementsByTagName('a');
 for(var i=0,n=an.length,url;i<n;i++) {
  url=filter(an[i].href);
  an[i].href=url;
  str="window.open('"+an[i].href+"','newWindow','height=480,width=640,status=yes,resizable=yes,scrollbars=yes,toolbar=yes,location=yes,menubar=yes');return false;";
  an[i].setAttributeNode(attr('onclick',str));
  an[i].setAttributeNode(attr('target','_blank'));
  an[i].title="Open PDF in a new window";
 };
};

function filter(str){
 return str.replace(/download\.php\?file\=/, '');
}

martyn-it · #3 (**permalink**) 09-01-2009, 07:04 PM

Not clunky at all - It will do the job.

Only thing I would possibly change is instead of putting all the window open commands in every link, write a opener function that has all the code - (window.open('"+an[i].href+"','newWindow','height=480,width=640,status= yes,resizable=yes,scrollbars=yes,toolbar=yes,locat ion=yes,menubar=yes'))
in and pass the link to it

Martyn

**weegillis** · #4 (**permalink**) 09-01-2009, 10:38 PM

That was a great suggestion, martyn-it. Thank you! I gave it some thought and came up with this working version:

Code:

Javascript:


function windowOpen(x) {
 window.open(x,'newWindow','height=480,width=640,status=yes,resizable=yes,scrollbars=yes,toolbar=yes,location=yes,menubar=yes');
}
function newWindow(x) {
 if(!document.getElementById || !document.getElementsByTagName) return;
 if(!document.getElementById(x)) return;
 dx=document.getElementById(x);
 an=dx.getElementsByTagName('a');
 for(var i=0,n=an.length,url;i<n;i++) {
  url=filter(an[i].href);
  str="windowOpen(\""+url+"\"); return false;";
  an[i].href=url;
  an[i].setAttributeNode(attr('onclick',str));
  an[i].setAttributeNode(attr('target','_blank'));
  an[i].title="Open PDF in a new window";
 };
};
function filter(str){
 return str.replace(/download\.php\?file\=/, '');
}

Should I use some form of constructor with an array of parameters for window.open() or is this form sufficient enough?

Bernd · #5 (**permalink**) 09-02-2009, 02:25 AM

For pdf-files you can try this in yout htaccess:

Code:

SetEnvIf Request_URI "\.pdf$" requested_pdf=pdf
Header add Content-Disposition "Attachment" env=requested_pdf

It shows the "open with/save" dialog.

**weegillis** · #6 (**permalink**) 09-02-2009, 04:31 AM

Quote:

Originally Posted by Bernd

It shows the "open with/save" dialog.

That would be as opposed to download.php? What an excellent suggestion.

But how would I give as a first option, a new window?

**weegillis** · #7 (**permalink**) 09-02-2009, 04:40 AM

Just to update, I've added a switch for PDF or external link title attribute assignment:

Code:

javascript:


function windowOpen(x) {
 window.open(x,'newWindow','height=480,width=640,status=yes,resizable=yes,scrollbars=yes,toolbar=yes,location=yes,menubar=yes');
}
function filter(x){
 return x.replace(/download\.php\?file\=/, '');
}
function newWindow(x) {
 if(!document.getElementById || !document.getElementsByTagName) return;
 if(!document.getElementById(x)) return;
 dx=document.getElementById(x);
 an=dx.getElementsByTagName('a');
 for(var i=0,n=an.length,url,val;i<n;i++) {
  url = filter(an[i].href);
  val = "windowOpen(\"" + url + "\"); return false;";
  an[i].href = url;
  an[i].title = pdfTest(url);
  an[i].setAttributeNode(attr('onclick',val));
  an[i].setAttributeNode(attr('target','_blank'));
 };
};
function pdfTest(x) {
 var pdf = /\.pdf/;
 return (!pdf.test(x))?"Opens link in new window":"Opens PDF in a new window";
}

Being a learner, there is a standing order for more advice, so have at 'er!

Bernd · #8 (**permalink**) 09-02-2009, 06:49 AM

Quote:

Originally Posted by weegillis

That would be as opposed to download.php? What an excellent suggestion.

But how would I give as a first option, a new window?

When the user selects open with ... normally his Acrobat Reader or a compatible programm is used. That's your new window for the pdf-files. The other choise from the dialog is to download - that's your fallback solution.

**weegillis** · #9 (**permalink**) 09-02-2009, 02:06 PM

The real issue for me is what the user is expecting. I've tried the dialog box method and didn't get universal support amongst my limited test group. They would all prefer the PDF to open in separate window on first click.

I say limited, but this is not something to be quickly discounted. It was unanimous. That's why I am more determined to have a new window automatically, and a download dialog by default.

**weegillis** · #10 (**permalink**) 09-02-2009, 08:05 PM

Additional update note:

The load event handler function can contain an array of fragment id's for multiple calls to newWindow(), rather than making multiple addEvent() calls.

Code:

Javascript
<body>
.
.
<script type="text/javascript"><!--
addEvent(window,"load",function(){
 f = new Array(
  'extra','jumpstart','external'
 );
 for ( var i = 0, n = f.length; i < n; i++ ) {
 newWindow( f[i] );
 };
})
//--></script>
</body>

This has been tested in new browsers only.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
dhtml script	delnaaz	Search Engine Optimization Forum	0	02-21-2009 05:32 AM
Overture Account: Content Match Summary and Precision Match	w3crawler	Yahoo! Discussion Forum	0	03-04-2005 02:48 AM
DHTML HELP! Please help me Please!	soulja90	Graphics & Design Discussion Forum	1	10-01-2004 08:36 AM
DHTML EFFECTS	attitudefever	Graphics & Design Discussion Forum	2	03-13-2004 02:30 AM
DHTML and IE for Mac question	stevolane	Web Programming Discussion Forum	3	11-26-2003 07:03 PM