4

这工作得很好：

<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。

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

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

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

TIA。

更新：2012 年 7 月 31 日

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

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

我认为解决此问题的一种方法是在加载后将 myContent var 的内容写入 FancyBox，但我无法 (A) 找到要写入的正确 DOM 节点，并且 (B) 我可以' t 让 FancyBoxiframe在iframe src="about:blank".

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

4

2 回答 2

5

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

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

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

于 2012-07-31T11:59:53.573 回答
0

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

请参阅此工作示例：jsFiddle

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

主要注意事项

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

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

于 2012-07-29T13:07:36.540 回答