PhantomJS (at least version 1.9.8) is not loading resources when you want to use relative path. However, after some research and experimenting here what’s working for me. Example:

var page = require('webpage').create(),
    content = '',
    relativeScriptPath = require('system').args[0],
    fs = require('fs'),
    absoluteScriptPath = fs.absolute(relativeScriptPath),
    absoluteScriptDir = absoluteScriptPath.substring(0, absoluteScriptPath.lastIndexOf('/'));

console.log('scriptDir: ' + absoluteScriptDir);

content += '';
content += '';
content += '';
content += '
test page
';
content += '';
page.content = content;

If You know better way – go ahead. Post it in the comment 🙂

2 Responses to “PhantomJS, resources and relative path”

1. Evgeni Dmitriev, 15 May 2015

   Does it mean something like:

   <link rel=”stylesheet” href=”/home/username/mydir/style.css” type=”text/css” media=”screen”>

   instead of:

   <link rel=”stylesheet” href=”file:///home/username/mydir/style.css” type=”text/css” media=”screen”>

   I’m expiriencing same problem, but only on Windows.

   Setting CSS link path without file:// scheme loads the CSS file itself, but breaks inner links inside CSS (e.g., relative paths to images)

   But on Ubuntu, everything works perfect with file:// scheme.

   First I thought about backslashes \ on Windows, but replacing them to normal forward slashes / still doesn’t help.

   Having PhantomJS 1.9.8 on both Windows 7 and Ubuntu 14.04.2 LTS

2. Cezary Tomczyk, 17 May 2015

   Interesting case with Ubuntu. Thanks for sharing those details. I am not sure now if it’s related to PhantomJS itself or it is related to OS. Probably should be checked with older version of PhantomJS just to compare the results on different OSes.