CODEWITHSUNDEEP
javascriptphphtmlrelative-path
apadana
apadana

Reputation: 14620

PHP include html file containing relative path

I have an html file which works fine by itself. The html file contains some relative paths.

When I include the html file in php, I run into issues with relative paths.

The chart.html file has a script src like this: 

<script src="./data/data.js"></script>

and index.php include looks like this: 

include('./chart/chart.html');

The error I get in browser is failing on this: 

X GET http://localhost/project/data/data.js

Obviously the path for data.js is missing the chart folder. It should be like this: http://localhost/project/chart/data/data.js

Here is my folder hierarchy: 

Sites/
  project/
    index.php
    chart/
        chart.html
        data/
           data.js

I know I can modify the html file and add chart to the path, but that will make the html file not to be viewable by itself. Basically the html file assumes the path is based on the current chart.html relative path. So what is the right way to have php include this html file and not mess up the relative paths?

Upvotes: 1

Views: 2486

Answers (1)

Jakumi
Jakumi

Reputation: 8374

The problem here is the discrepency between absolute and relative paths. By including it into some other path, effectively changing the path of chart.html, but NOT changing the relative path of the dependent files, you break the code.

There is the base tag https://developer.mozilla.org/en/docs/Web/HTML/Element/base that you could put in the head. However, that may make matters worse, since the other content your index.php might include will not work anymore, unless those use absolute paths. If you don't do this anyway, this might be a good solution.

The second solution would probably be to (programmatically) search for relative paths in your html and replace those paths with corrected paths on the fly. there are some weird cases where javascript is used in html and there may be some "anti-copy" protection js code, that will probably choke on this.

The third solution (depending on your use case of course) would be, to not include the html but instead put an iframe in your output, where you point to the correct path. Since it's loaded from the right path, relative paths should work again. (I'd prefer that one, especially if it's some kind of "preview" functionality you're after).

Another solution could be to put another index.php into the chart folder, that - by including (and making the original index.phps code flexible enough) - will do the same work as the original index.php, but as it is requested from a different path, everything is fine.

A different approach would be URL rewrites, where you could make it appear as if the index.php was in the chart directory (a redirect from the original call might be necessary). URL rewrites can be difficult, depending on your overall setup.

Those are my proposals, however, depending on what you actually want to do with your project, there might be more suitable solutions.

update to the extra index.php solution:

Note that this will only work for showing one project at a time, and not multiple simultaneously. Also this highly depends on what your index.php does or how it works. Let me assume it looks like this:

<?php
$project = !empty($_POST['project']) ? $_POST['project'] : '';
$projects = array('chart', 'otherproject');
if(in_array($project, $projects)) {
    include $project.'/'.$project.'.html';
}
foreach($projects as $p) {
    echo '<a href="?project='.$p.'">'.$p.'</a>';
}

Now, the new chart/index.php would do something like:

<?php $project='chart'; include '../index.php';

and you'd need to change your original /index.php to:

<?php
$project = !empty($project) ? $project : '';                   // <-- changed
$projects = array('chart', 'otherproject');
if(in_array($project, $projects)) {
    include $project.'/'.$project.'.html';
}
foreach($projects as $p) {
    echo '<a href="/URL/TO/ROOT/'.$p.'/index.php">'.$p.'</a>'; // <-- changed
}

Upvotes: 4

Related Questions