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

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打开，但未显示任何文本。 （文本“现在发短信给我”显示在#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。

更新：2012年7月31日

这个新的jsFiddle示例： iframe报表查看器有效，但在FancyBox中无效

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

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

有什么建议么？ 还是看到一种解决jsFiddle示例的方法？

Answer 1

您是否真的希望<iframe src="#myID"></iframe>会将ID为myID的元素打开到iframe中？

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

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

Answer 2

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

请参见以下工作示例： jsFiddle

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

主要警告

我已经在IE 8中对其进行了测试，并且可以正常工作，但是仍然无法在Chrome中正常工作。

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

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

问题描述

2 个解决方案

解决方案1
5 已采纳 2012-07-31 11:59:53

解决方案2
0 2012-07-29 13:07:36

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

问题描述

2 个解决方案

解决方案1 5 已采纳 2012-07-31 11:59:53

解决方案2 0 2012-07-29 13:07:36

解决方案1
5 已采纳 2012-07-31 11:59:53

解决方案2
0 2012-07-29 13:07:36