Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Iframe Relative Paths Challenge

Tags:

html

iframe

I have a page and within the page I have an Iframe. The directory is as follows:

Folder1
   Folder2
      IframeCSS
          IframeCSS.Css
      iframePage1.html
stuff.css
parentPage1.html

In the iframePage it is referencing the IframeCSS.Css by use of relative link so /IframeCss/IframeCSS.Css

Due to the nature of the application, I am unable to change the link of the iframe page via hard code (Modifying the physical iFrame Html Page)

The overall goal is to get iframePage1.html to see IframeCSS.Css (and all other hrefs/src's) through relative links (href="/IframeCSS/IframeCss.Css")

There are a couple of things I've tried:

  1. Dynamically add a base path to the Iframe

    This failed because the base can only be added AFTER the iframe loads thus making the links act as if base did not exists

  2. Create a container Iframe to get the HTML, add the Base, and copy over the Contents over to the displayed Iframe

    This failed because of the reason above, this method also causes issues with Google Map API's being loaded in as well

  3. Go through the container iframe, using jquery, append the parent root to all src's and hrefs's to change the url

    This also failed.

What would you guys suggest I do at this point?

(The iframe points to the same domain AND the user needs to be able to navigate through the iframe)

parent HTML:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" href="cmsCSS/CmsStyle.css" />
    <title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="CmsScript.js"></script>
<script src="Insights.js"></script>
</head>

<body id="Dash">
    
    <form id="form1" runat="server">
    <div id="topDash">
        <img id="something" src="img/logo.png" />

    </div>

    </form>
         <iframe id="dashBody"></iframe>
         <iframe id="iframeContainer"></iframe>
</body>
</html>
like image 627
calcazar Avatar asked Oct 08 '13 19:10

calcazar


1 Answers

using your same directory structure, this -

href="IframeCSS/IframeCss.css"

didn't work? Without the "/" keeps it in the same directory. Conversely, using "../" means back one directory. So if you're trying to move backwards, you can just keep adding "../" (ex: "../../../stuff.css").

like image 62
opanitch Avatar answered Sep 28 '22 00:09

opanitch