FancyBox将DIV的内容显示为iFrame类型

FancyBox displaying contents of a DIV as type iFrame

本文关键字：显示 iFrame 类型 DIV FancyBox      更新时间：2024-04-13

这非常好用：

<script type="text/javascript">
   $(document).ready(function() { 
       $.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
   });
</script>

也就是说，FancyBox打开并显示CNN主页。但是，如果我将href属性更改为"#pg"

并以这种方式对页面进行编码：

 <body>
    <div id="pg"></div>
    <script type="text/javascript">
     document.getElementById("pg").innerHTML = "<!DOCTYPE html PUBLIC '"-//W3C//DTD XHTML 1.0 Transitional//EN'" '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'"><html xmlns='"http://www.w3.org/1999/xhtml'"><head><title></title></head><body>test me now</body></html>";
    </script>
</body>

FancyBox打开，但不显示任何文本。（文本"text me now"显示在#pgdiv元素中。请注意，它被分配给页面末尾div的innerHTML。）

基本上，我想知道是否有一种方法可以动态初始化DIV的innerHTML属性，并将其显示为FancyBox类型的iFrame？（iFrame的内容将有一个打印iFrame文档的按钮。）

TIA-

更新：07/28/12

正如@arttronics所建议的，我制作了一个jsFiddle

总之，最终的目标是能够单击FancyBox中包含的按钮，该按钮打印FancyBox的整个内容，而无需打开另一个窗口。（我想使用FancyBox作为Javascript解析内容的报告查看器。）

我认为我需要使用FancyBox的iframe播放器来显示内容，但我可能错了。

jsFiddle显示：

FancyBox能够显示使用内联播放器验证为HTML页面的文本。文本可以通过href或content引用。

然而，当播放器是iframe并且内容来自href时，FancyBox容器是空的。如果内容来自content属性，FancyBox将显示404错误。

只需对jsFiddle代码进行注释和取消注释，就能明白我的意思。

任何关于我如何实现目标的想法都将受到赞赏，并将获得赞成票！

TIA。

更新：07/31/2012

这个新的jsFiddle示例：Iframe报告查看器可以工作，但不能在FancyBox 中工作

正如您所看到的，我已经尝试了几种方法来在FancyBox中显示iframe。虽然FancyBox确实显示iframe的内容，但打印功能会中断。

我认为解决这个问题的一种方法是在加载myContent var后将其内容写入FancyBox，但我无法（A）找到要写入的正确DOM节点，以及（B）当iframe src="about:blank"时，我无法让FancyBox使用其iframe播放器显示iframe。

有什么建议吗？或者，您看到了修复jsFiddle示例的方法吗？

您真的希望<iframe src="#myID"></iframe>将id为myID的元素打开到iframe中吗？

如果你想打印fancyBox的内容，那么你可以添加打印按钮-http://jsfiddle.net/s3jRA/

更新的演示-http://jsfiddle.net/qVrLr/-用于创建和更新iframe 的内容

通常情况下，我会向后看。解决方案（需要注意）是这样的，而不是使用iframe播放器显示div元素，而是在html中隐藏一个iframe并使用内联播放器显示它。

请参阅以下工作示例：jsFiddle

这解决了能够在不打开另一个窗口的情况下打印动态内容的问题。此外，如果文本溢出FancyBox，则仍会打印整个内容。（当我打印FancyBox并将各种页面元素的可见性样式更改为隐藏时，我无法做到这一点）。

主要注意事项

我已经在IE 8中测试过了，它很有效，但我仍然无法在Chrome中使用它。

尝试这种方法的一个原因是我认为我可以在dyanmic页面中包含@media打印风格的内容。由于某种原因，该技术（无论如何在IE中）不起作用。但是，内联样式的工作原理与HTML标记标记一样（请注意jsFiddle示例中的<strong>标记：var myContent）。所以有些事情很奇怪。

相关文章：