FancyBox 将 DIV 的内容显示为 iFrame 类型 [英] FancyBox displaying contents of a DIV as type iFrame
问题描述
这工作得很好:
<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"
That is, FancyBox opens and displays the CNN homepage. However, if I change the href attribute to "#pg"
并以这种方式对页面进行编码:
and have the page coded this way:
<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.)
FancyBox opens but no text is displayed. (The text "text me now" is displayed in the #pg div element. Notice it is assigned to the DIV's innerHTML at the end of the page.)
基本上，我想知道是否有一种方法可以动态初始化 DIV 的 innerHTML 属性并将其显示为 FancyBox 类型的 iFrame?(iFrame 的内容会有一个按钮来打印 iFrame 的文档.)
Basically, I want to know if there is a way dynamically initialize a DIV's innerHTML property and display it as a FancyBox type iFrame? (The content of the iFrame will have a button that prints the iFrame's document.)
TIA
更新:07/28/12
正如@arttronics 所建议的，我整理了一个 jsFiddle
As @arttronics suggested, I put together a jsFiddle
总而言之，最终的目标是能够点击包含在 FancyBox 中的按钮，该按钮可以打印 FancyBox 的全部内容，而无需打开另一个窗口.(我想使用 FancyBox 作为由 Javascript 解析的内容的报告查看器.)
To summarize, ultimately the objective is to be able to click a button contained inside a FancyBox that prints the entire contents of the FancyBox without opening another window. (I want to use FancyBox as a report viewer for content parsed by Javascript.)
我假设我需要使用 FancyBox 的 iframe 播放器来显示内容，但我可能是错的.
I assume that I need to display content using FancyBox's iframe player, but I could be wrong.
jsFiddle 显示:
FancyBox 能够使用内嵌播放器显示验证为 HTML 页面的文本.文本可以通过 href 或 content 引用.
The FancyBox is able to display text that validates as an HTML page using the inline player. The text can either be referenced via href or content.
然而，当播放器是一个 iframe 并且内容来自 href 时，那么 FancyBox 容器是空的.如果内容来自 content 属性，FancyBox 会显示 404 错误.
However, when the player is an iframe and the content comes from href, then the FancyBox container is empty. If the contents comes from the content attribute, FancyBox shows a 404 error.
只需对 jsFiddle 代码进行注释和取消注释即可了解我的意思.
Simply comment and uncomment the jsFiddle code to see what I mean.
任何关于我如何实现目标的想法都受到赞赏，并会得到支持！
Any ideas for how I can meet my objective are appreciated and will get an up vote!
TIA.
更新:07/31/2012
这个新的 jsFiddle 示例:Iframe 报告查看器有效，但在 FancyBox 中无效
This new jsFiddle example: Iframe report viewer works but not in FancyBox
如您所见，我尝试了多种方法在 FancyBox 中显示 iframe.虽然 FancyBox 确实显示了 iframe 的内容，但打印功能中断了.
As you can see, I've tried several ways to display the iframe in FancyBox. And while FancyBox does display the contents of the iframe, the printing feature breaks.
我认为解决此问题的一种方法是在加载后将 myContent var 的内容写入 FancyBox，但我无法 (A) 找到要写入的正确 DOM 节点，以及 (B)当 iframe src="about:blank" 时，我无法让 FancyBox 使用其 iframe 播放器显示 iframe.
I think one method for solving this problem would be to write the content of the myContent var to the FancyBox after it is loaded, but I can't (A) find the right DOM node to write to, and (B) I can't get FancyBox to display an iframe using its iframe player when the iframe src="about:blank".
有什么建议吗?或者您是否看到修复 jsFiddle 示例的方法?
Any suggestions? Or do you see a way to fix the jsFiddle example?
推荐答案
你真的期望 <iframe src="#myID"></iframe> 会打开一个元素id myID 进入 iframe?
Do you really expect that <iframe src="#myID"></iframe> would open an element having id myID into iframe?
如果你想打印fancyBox的内容，那么你可以添加打印按钮 - http://jsfiddle.net/s3jRA/
If you want to print content of the fancyBox, then you can add print button - http://jsfiddle.net/s3jRA/
更新演示 - http://jsfiddle.net/qVrLr/ - 用于创建和更新 iframe 的内容
Updated demo - http://jsfiddle.net/qVrLr/ - for creating and updating contents of iframe
这篇关于FancyBox 将 DIV 的内容显示为 iFrame 类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
