Question

这完全没问题：

<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打开但不显示任何文本。（文本“now me now”显示在#pg div元素中。注意它被分配给页面末尾的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 report viewer works but not in FancyBox

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

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

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

Answer 1

您真的希望<iframe src="#myID"></iframe>会在iframe中打开ID为myID的元素吗？

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

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

Answer 2

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

请参阅此工作示例：jsFiddle

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

主要警告

我已经在IE 8中对此进行了测试，但它确实有效，但我还是无法在Chrome中使用它。

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

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

2 个答案: