Question

[更新测试文件]

我试图将iframe中的内容显示为（几乎）完整的窗口大小弹出窗口。

以下是整个页面的结构：

<html>
  <head>
    <!-- no bootstrap -->
    <!-- no jquery -->
    <!-- some other ui framework libs -->
  </head>
  <body>
    <div id=container>
      <div id=header></div>
      <div id=left-side-bar></div>
      <div id=right-side-view>
        <div id=top-bar></div>
        <div id=bottom-user-area>
          <iframe id=user-area src='mypage.html'>
            <!-- my content comes here -->
            <html>
              <head>
                <!-- jquery js and css -->
                <!-- boostrap js and css -->
                <!-- jqueryui js and css -->
                <!-- page specific js and css -->
              </head>
              <body>
                <!-- all my stuff that is the user interface goes here -->
                <div id=content>
                  <div id=input-area></div>
                  <div id=results-area></div>
                </div>
              </body>
            </html>
          </iframe>
        </div>
      </div>
    </div>
  </body>
</html>

所以我想在iframe中拉出#content div，以便在整个页面（iframe外）显示为完整大小的弹出窗口。我没有

之外的任何内容的源代码访问权限

我可以使用父级访问外部div #container并在那里创建div #popup，从#content获取html内容并插入#popup，使用jQuery对话框显示弹出窗口。但我面临一些我认为理解的问题，但我不确定如何解决这个问题。

弹出窗口可以选择样式，但按钮点击和其他事件不起作用。也许是因为外在语境确实存在加载了jQuery和bootstrap？
我无法将弹出窗口调整为#container的宽度和高度。我假设一个默认的宽度和高度。
在解决了上述两点之后，我认为我可能遇到了另一个问题 - 因为#content和#popup中的id和事件等相同，所以弹出窗口中发生的任何事情都会发生在#content呢？或者是上下文（iframe或外部）中包含的事件等。但如果确实发生了，我该如何防止这种情况发生呢？或者可以配置它。

嗯，我认为这总结了一下。如果这篇文章很长或不清楚，请耐心等待。想了解您如何解决问题的意见。

非常感谢您的帮助。

很难模拟，但如果你想尝试，我设法将场景编码为两个文件：

main.html - 这是主页。我无权访问该来源，但只会将我的网页包含为iframe。
iframe.html - 这是我的页面，我想从这里（部分）内容显示为完整大小的弹出窗口

从iframe访问父窗口/文档非常困难。由于交叉来源，Chrome不允许它，即使在这种情况下和实际情况中它们来自同一个来源。 Safari允许访问iframe的父级，但不允许修改父级。所以对于这个测试，我添加了一个div #popitout，假设我会以某种方式找到一种方法来创建一个（另一个时间跨栏）。

提前致谢 Vivek Ragunathan

在iframe外部显示完整尺寸的弹出广告但是来自iframe的内容？

0 个答案: