Question

我有一个页面，在页面中我有一个iframe。目录如下：

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

在iframePage中，它通过使用相对链接引用IframeCSS.Css，因此/IframeCss/IframeCSS.Css

由于应用程序的性质，我无法通过硬编码更改iframe页面的链接（修改物理iFrame Html页面）

总体目标是通过相对链接（iframePage1.html）让IframeCSS.Css看href="/IframeCSS/IframeCss.Css"（以及所有其他href / src）

我尝试过几件事：

动态添加Iframe的基本路径

此操作失败，因为只能在iframe加载后添加基数，从而使链接的行为就像基础不存在一样
创建容器Iframe以获取HTML，添加Base，并将内容复制到显示的Iframe

由于上述原因导致此失败，此方法也会导致Google Map API被加载的问题
使用jquery遍历容器iframe，将父根添加到所有src和hrefs以更改url

这也失败了。

你们在这一点上建议我做什么？

（iframe指向同一个域，用户需要能够浏览iframe）

父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>

Answer 1

使用相同的目录结构，这个 -

href="IframeCSS/IframeCss.css"

不起作用？没有“/”将它保存在同一目录中。相反，使用“../”表示返回一个目录。因此，如果你想向后移动，你可以继续添加“../”（例如：“../../../ stuff.css”）。

Answer 2

引用同一域内的页面根本不可能，因为即使没有iframe，页面也无法使用相对文件路径：

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

如果您通过输入domain.com/Folder1/Folder2/IframePage1.html来访问该页面该页面将无法正常工作，因为IframePage1.html尝试使用以下命令访问css：

href="/IframeCSS/IframeCss.Css"

这意味着它正在寻找domain.com/IframeCSS/IframeCss.Css并根据我提供的文件结构，它根本就不存在。

我试图做的是简单地以某种方式更改整个iframePage的Href和src而不是查找domain.com/IframeCSS/IframeCss.Css，它会更正链接并在domain.com/Folder1/Folder2/IframePage1.html中搜索它。< / p>

解决方法是将Folder2的内容放在根目录中，并在新根目录中创建一个包含parentPage1.html的新目录。这样，无需更改文件路径。

Answer 3

如果您有权访问在iFrame中呈现的页面，那么您只需在该页面上的<head>标记内添加您的链接。你不应该通过调用页面做任何事情。

您可以单独查看正在调用的页面。所以一切都做好了。 JavaScript和所有。

首先创建该页面。然后将其调入另一页。在您考虑将其调用到另一个页面中的iFrame之前，应该先完成iframePage1.html。你不应该通过parentPage1.html做任何事情。

iframePage1.html应该拥有自己的<html>标记，它应该是一个自我维护的页面，可以在没有iframe的浏览器中查看。

我觉得我有点过分了。但我想确保它被理解。

我可以在我的网页上的iframe中调用google.com，如果我在浏览器中单独打开它，它看起来就像它一样。

找到您正在寻找的答案

看看这个小提琴，右边的iframe有可点击的链接，你可以在那个iframe里面导航。

我设置沙箱只允许一定数量的东西，在此问题之前我不知道这个。

JSFiddle

这是我发现的页面，它告诉了我一些关于沙盒的内容，听起来像我稍后会读到的内容

也许你应该看一下。

Sandboxed iframes

我认为你可以在iframe中移动，但我错误，但是使用Sandboxing你可以做到这一点!!!!

iframe相对路径挑战

3 个答案: