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打开但不显示任何文字。 （文本now 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 或内容引用。
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）我无法让FancyBox显示 iframe 在 iframe src =about：blank。
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屋！
