PHP include html file containing relative path

Question

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?

Try doing <script src="./chart/data/data.js"></script>. From the error, I guess the php script starts looking from the current working directory and hence you get an error. — Vivek Pradhan
– Vivek Pradhan, Commented Aug 9, 2016 at 7:16
@VivekPradhan Your proposed solution would break the functionality of standalone chart.html file which is required. — Basit
– Basit, Commented Aug 9, 2016 at 7:17
stackoverflow.com/questions/12432913/…, I think this covers your issue — Sirjan Sharma
– Sirjan Sharma, Commented Aug 9, 2016 at 7:17
Just as a side note, include in PHP is a language construct, not a function. Consequently, syntax is not include($_SERVER['DOCUMENT_ROOT'].'/chart/chart.html'); (with brackets) but include $_SERVER['DOCUMENT_ROOT'].'/chart/chart.html'; (without brackets). — Rounin
– Rounin, Commented Aug 9, 2016 at 7:40

Jakumi · Accepted Answer · 2016-08-09 08:08:40Z

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
}

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. --> could you elaborate more on this? If it works it's the best idea. I tried it but index.php in the chart folder should still include the chart.html as ./chart/chart.html. The new index.php doesn't understand that it's sitting beside the chart.html.
@apadana Again, you can include using paths relative to the root instead of the current directory.

Collectives™ on Stack Overflow

PHP include html file containing relative path

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related