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

【问题标题】：FancyBox displaying contents of a DIV as type iFrameFancyBox 将 DIV 的内容显示为 iFrame 类型
【发布时间】：2012-07-26 22:27:24
【问题描述】：

这很好用：

<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”显示在#pg div 元素中。请注意，它分配给页面末尾的DIV 的innerHTML。）

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

TIA

更新：2012 年 7 月 28 日

按照@arttronics 的建议，我整理了一个jsFiddle

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

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

jsFiddle 显示：

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

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

只需注释和取消注释 jsFiddle 代码即可了解我的意思。

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

TIA。

更新：2012 年 7 月 31 日

这个新的 jsFiddle 示例：Iframe report viewer works but not in FancyBox

如您所见，我尝试了几种方法在 FancyBox 中显示 iframe。虽然 FancyBox 会显示 iframe 的内容，但打印功能会中断。

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

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

【问题讨论】：

尝试使用 FancyBox HTML inline player 而不是 iframe player。
@arttronics 我认为这会奏效。我明天必须做更多的测试。与此同时，为你投上一票。谢谢。
不幸的是，内联类型不允许我复制 iframe 类型的行为。使用 iframe，我可以在 FancyBox 中显示页面上的一个按钮，该按钮的 onclick() 处理程序编码如下 window.print() 并且查看器可以很好地打印出 FancyBox 内容。即使我的内联内容看起来是一个完整的 HTML 文档，DOM 也不会将其视为文档，因此 print() 方法会打印主窗口的内容。（我知道我可以通过打开一个新窗口来打印 FancyBox 的内容，但我想尽可能避免这种情况。）
请注意，当此代码打开 FancyBox 并显示内容时，对 window.print(); 的调用不起作用：$.fancybox({'content':'<!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>Print Me</title></head><body><h1>Print Me</h1><button onlick="window.print();">Print</button></body></html>', 'Width':500,'Height':500, 'hideOnContentClick': false, 'type':'inline' });
@arttronics 请参阅jsfiddle.net/taa1953/P823J。请注意，仅打印 FancyBox 的部分内容。如果你取消注释type 属性，div 的内容将不再出现在 FancyBox 中。

标签： javascript jquery iframe fancybox

【解决方案1】：

你真的期望<iframe src="#myID"></iframe> 会在iframe 中打开一个id 为myID 的元素吗？

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

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

【讨论】：

您打印 FancyBox 内容的解决方案是执行此操作的标准解决方案。但是，我正在寻找一种不需要打开另一个窗口（打印机设置对话框窗口除外）的解决方案
关于您的问题，我不确定您引用的是哪一个 jsFiddles，因为我一直在尝试多种方法。无论如何，这是一个纯粹的iframe 示例，说明我正在努力实现的目标：jsfiddle.net/taa1953/SA2rw。我最初的想法是，如果 FancyBox iframe 播放器可以显示这个 iframe，那么我会有一个漂亮的报表查看器。
那么，你想打开那个 iframe 吗？那就去做吧:) - jsfiddle.net/qVrLr
太棒了。我已经在 IE 8、9、当前 Chome 和 FF 8.x 中测试了您的解决方案。非常感谢。为了清楚起见，请编辑您的答案以包含您的新 jsFiddle 示例，我很乐意将其排除在外。 @arttronics，看起来好像你有赏金要付。虽然 Janis 作为 FancyBox 的作者有一点优势；）谢谢你们俩。
@Janis - 你一定在这上面花了很多时间。干得好！

【解决方案2】：

通常情况下，我是在向后看。解决方案（带有警告）是这样的，而不是使用 iframe 播放器显示 div 元素，而是在 html 中隐藏 iframe 并使用内联播放器显示它。

查看这个工作示例：jsFiddle

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

主要注意事项

我已经在 IE 8 中对此进行了测试，它可以工作，但是我仍然无法让它在 Chrome 中工作。

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

【讨论】：

不要把梨和苹果混在一起。您提到的 v1.3.4 的问题与 v2.x 无关
@JFK，我看不出我是如何混合梨和苹果的。我的评论特别提到 v1.3.4，其目的是如果有人在尝试代码，并且碰巧在尝试那个版本的 FB，那么就会出现问题以及记录的修复程序。只是想阻止某人拔头发。感谢您的 cmets 和支持，如果您认为我的评论不公平或不准确，我很乐意对其进行编辑。
恕我直言，由于您的答案在 Chrome 中完全失败，因此它不是可接受的答案，也不值得赏金。不过，如果进行了改进，那就另当别论了。
@arttronics 感谢您提供赏金。希望你的慷慨会有所收获。但赏金并不是我的动力。作为OP，我有需要。我已经取得了进展，但是正如您所说，答案不适合面向公众的网站（尽管对于某些公司的 Intranet 并且已经绑定了桌面并仅部署 IE 为例）。至于我对 FB 早期 v. 的评论，我将删除它。但是，我一直在尝试各种版本。得到一些工作。
@Karl，有一个名为 Shadowbox 的替代灯箱克隆。那个灯箱也不有打印功能，但是，有人为此做了一个打印按钮。或许打印中的相同方案也可以在您的 Fancybox 中完成！这是forum post 的一些信息（最后一行），它也提供了链接。 附注：我不回复该网站上的帖子，因为可以使用论坛的搜索工具找到大量重复问题。