logo标签列表

FancyBox将DIV内容显示为iFrame类型

javascriptjqueryiframefancybox
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
更新：07/28/12
正如@arttronics建议的那样，我组合了一个jsFiddle 总之，最终目标是能够单击包含在FancyBox内部的按钮，打印FancyBox的整个内容，而不需要打开另一个窗口。（我想使用FancyBox作为由Javascript解析的内容的报告查看器。）
我假设我需要使用FancyBox的iframe播放器来显示内容，但我可能错了。 jsFiddle 显示： FancyBox可以使用内联播放器显示验证为HTML页面的文本。文本可以通过href或content引用。然而，当播放器是iframe且内容来自href时，FancyBox容器为空。如果内容来自content属性，则FancyBox会显示404错误。只需注释和取消注释jsFiddle代码即可了解我的意思。欢迎提出任何想法来满足我的目标，并会得到赞！更新：07/31/2012。这个新的jsFiddle示例：Iframe report viewer works but not in FancyBox。正如您所看到的，我已经尝试了几种方法来在FancyBox中显示iframe。虽然FancyBox确实显示了iframe的内容，但打印功能却出现了问题。
我认为解决这个问题的方法之一是在myContent变量加载后将其内容写入FancyBox中，但我找不到正确的DOM节点来写入（A），也无法让FancyBox使用其iframe播放器来显示iframe（B）当iframesrc="about:blank"时。有什么建议吗？或者你能看到修复jsFiddle示例的方法吗？
1
尝试使用FancyBox HTML“内联播放器”，而不是“iframe播放器”。 - arttronics
很遗憾，inline类型不允许我复制iframe类型的行为。使用iframe，我可以在FancyBox中显示页面上的按钮，onclick()处理程序编码如下：window.print()，并且查看者可以得到一个漂亮的打印出FancyBox内容的输出。即使我的内联内容看起来像是完整的HTML文档，但DOM并不将其视为文档，因此print()方法会打印主窗口的内容。（我知道我可以通过打开新窗口来打印FancyBox的内容，但如果可能的话，我想避免这样做。） - Karl
@arttronics 我想使用iframe播放器。我的问题是，如何处理动态内容。最初的问题指出，当href属性设置为页面元素的ID时，iframe播放器无法工作。它只能在href指向物理页面时才能工作。请参见原始问题以获取示例代码。 - Karl
1
@arttronics 请查看 http://jsfiddle.net/taa1953/P823J/。请注意，FancyBox只打印部分内容。如果您取消注释 type 属性，则 div 的内容将不再出现在 FancyBox 中。 - Karl
еҰӮжһңдҪҝз”Ёiframeзҡ„жғіжі•жҳҜдёәдәҶжү“еҚ°fancyboxзҡ„еҶ…е®№пјҢиҜ·жҹҘзңӢhttp://stackoverflow.com/a/11485923/1055987гҖӮ - JFK
显示剩余4条评论
2个回答
5

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

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

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

关于你的问题，我不确定你所指的jsFiddles中的哪一个，因为我一直在尝试许多方法。无论如何，这里是一个纯粹的iframe示例，展示了我想要实现的效果：http://jsfiddle.net/taa1953/SA2rw/。我的最初想法是，如果FancyBox iframe播放器可以显示这个iframe，那么我就会有一个漂亮的报告查看器。 - Karl
1
所以，你想打开那个iframe？那就去做吧 :) - http://jsfiddle.net/qVrLr/ - Janis
太好了。我已经在IE 8、9、当前版本的Chome和FF 8.x中测试了你的解决方案。非常感谢。请编辑你的答案，包含你的新jsFiddle示例以增强清晰度，我很乐意接受它。@arttronics，看起来你有一笔赏金要支付。虽然Janis作为FancyBox的作者有一些优势;) 感谢你们两个。 - Karl
@Karl，这里有关于悬赏系统的信息。根据我之前的消息，出现问题的浏览器是当前版本的Firefox v14.1。这是使用Adobe PDF打印机插件的屏幕截图。请注意，这只是其中的第1页，总共有5页。为了确保万无一失，我还进行了硬拷贝，结果也是一样的。 - arttronics
@arttronics 有一件可能导致问题的事情，如果您没有更改 @media print 样式，我将其设置为 p{margin:100px}。因为我正在测试，不关心所有细节。我认为它应该设置为 p{margin:100pt;}（注意：是“点”，而不是“像素”）。我很想知道这是否有帮助。 - Karl
显示剩余9条评论
0
通常情况下，我总是把事情看反了。解决方案（带有警告）是这样的：不要使用iframe播放器显示div元素，而是在html中隐藏一个iframe，并使用内联播放器显示它。
请参见此工作示例：jsFiddle 这解决了打印动态内容而无需打开另一个窗口的问题。此外，如果文本溢出了FancyBox，则仍将打印整个内容。（当我打印FancyBox并将各种页面元素的可见性样式更改为隐藏时，我无法做到这一点）。
主要注意事项：
我已在IE 8中测试过这个方法，它可以工作，但是我仍然无法让它在Chrome中工作。
尝试这种方法的原因之一是我认为我将能够在动态页面内容中包含@media print样式。由于某种原因，该技术在IE中不起作用。但是，内联样式确实有效，HTML标记也有效（请注意jsFiddle示例中的<strong>标记：var myContent）。所以有些奇怪。
1
不要混淆梨和苹果。你提到的v1.3.4问题与v2.x无关。 - JFK
@JFK，我不明白我是如何混淆梨和苹果的。我的评论特别指的是版本v1.3.4，并且意图是如果有人正在尝试代码，并碰巧在尝试FB的这个版本时出现问题，那么就会有一个问题以及已记录的解决方法。只是想防止有人抓狂。感谢您的评论和支持，如果您认为我的评论不公平或不准确，我会很乐意进行编辑。 - Karl
在我看来，由于你的回答在Chrome中完全失败了，它不是一个可接受的答案，也不值得悬赏。不过，如果有改进的话，那就是另一回事了。 - arttronics
@arttronics，感谢您的慷慨奖励。希望这样能有所收获。但是赏金不是我的动力所在。作为OP，我有一个需求。我已经取得了进展，但正如您所说，答案不适合公开面向网站（虽然它可能适用于某些公司的内部网络，并且仅限制台式机并且只部署IE）。至于我关于早期版本FB的评论，我将删除它。但是，我一直在尝试各种版本以使某些东西起作用。 - Karl
1
@Karl，有一个名为Shadowbox的备用灯箱克隆。该灯箱也没有打印功能，但是有人为其制作了一个打印按钮。或许从你的Fancybox中也可以实现相同的打印方案！这里是那个论坛帖子，其中提供了一些信息（最后一行），并附带链接。顺便说一句：我不回复那个网站上的帖子，因为大部分重复问题都可以使用论坛的搜索工具找到答案。 - arttronics
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接