FancyBox将DIV的内容显示为iFrame类型
[英]FancyBox displaying contents of a DIV as type iFrame
问题描述
This works perfectly fine: 
这工作得很好：
<script type="text/javascript">
$(document).ready(function() {
$.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
});
</script>
That is, FancyBox opens and displays the CNN homepage. 也就是说，FancyBox将打开并显示CNN主页。 However, if I change the href attribute to "#pg" 但是，如果我将href属性更改为“ #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 opens but no text is displayed. FancyBox打开，但未显示任何文本。 (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.) （文本“现在发短信给我”显示在#pg div元素中。请注意，它已在页面末尾分配给DIV的innerHTML。）
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? 基本上，我想知道是否有一种方法可以动态地初始化DIV的innerHTML属性并将其显示为FancyBox类型的iFrame？ (The content of the iFrame will have a button that prints the iFrame's document.) （iFrame的内容将带有一个用于打印iFrame文档的按钮。）
TIA TIA
UPDATE: 07/28/12 更新：07/28/12
As @arttronics suggested, I put together a jsFiddle 正如@arttronics所建议的，我整理了一个jsFiddle
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. 总而言之，最终的目的是能够单击FancyBox内包含的按钮，该按钮可打印FancyBox的全部内容而无需打开另一个窗口。 (I want to use FancyBox as a report viewer for content parsed by Javascript.) （我想将FancyBox用作由Javascript解析的内容的报表查看器。）
I assume that I need to display content using FancyBox's iframe player, but I could be wrong. 我认为我需要使用FancyBox的iframe播放器显示内容，但是我可能错了。
The jsFiddle shows: jsFiddle显示：
The FancyBox is able to display text that validates as an HTML page using the inline player. FancyBox能够使用嵌入式播放器显示可验证为HTML页面的文本。 The text can either be referenced via href or content . 可以通过href或content引用文本。
However, when the player is an iframe and the content comes from href , then the FancyBox container is empty. 但是，如果播放器是iframe ，并且内容来自href ，则FancyBox容器为空。 If the contents comes from the content attribute, FancyBox shows a 404 error. 如果内容来自content属性，则FancyBox将显示404错误。
Simply comment and uncomment the jsFiddle code to see what I mean. 只需注释和取消注释jsFiddle代码即可了解我的意思。
Any ideas for how I can meet my objective are appreciated and will get an up vote! 任何有关如何实现目标的想法都将受到赞赏，并将获得投票！
TIA. TIA。
Update: 07/31/2012 更新：2012年7月31日
This new jsFiddle example: Iframe report viewer works but not in FancyBox 这个新的jsFiddle示例： iframe报表查看器有效，但在FancyBox中无效
As you can see, I've tried several ways to display the iframe in FancyBox. 如您所见，我尝试了几种在FancyBox中显示iframe的方法。 And while FancyBox does display the contents of the iframe , the printing feature breaks. 当FancyBox确实显示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" . 我认为解决此问题的一种方法是将myContent变量的内容在加载后写入FancyBox，但是我（A）找不到要写入的DOM节点，而（B）我可以当iframe src="about:blank"时，让FancyBox使用其iframe播放器显示iframe 。
Any suggestions? 有什么建议么？ Or do you see a way to fix the jsFiddle example? 还是看到一种解决jsFiddle示例的方法？
2 个解决方案
解决方案1
5 已采纳 2012-07-31 11:59:53
Do you really expect that <iframe src="#myID"></iframe> would open an element having id myID into iframe? 您是否真的希望<iframe src="#myID"></iframe>会将ID为myID的元素打开到iframe中？
If you want to print content of the fancyBox, then you can add print button - http://jsfiddle.net/s3jRA/ 如果要打印fancyBox的内容，则可以添加打印按钮-http: //jsfiddle.net/s3jRA/
Updated demo - http://jsfiddle.net/qVrLr/ - for creating and updating contents of iframe 更新的演示-http: //jsfiddle.net/qVrLr/-用于创建和更新iframe的内容
解决方案2
0 2012-07-29 13:07:36
As is often the case, I was looking at things backwards. 通常情况下，我都是往后看。 The solution (with caveats) is this, rather than display a div element using the iframe player, hide an iframe in the html and display it using the inline player. 解决方案（带有警告）是这样的，而不是使用iframe播放器显示div元素，而是在html中隐藏iframe并使用内联播放器显示它。
See this working example: jsFiddle 请参见以下工作示例： jsFiddle
This solves the problem of being able to print dynamic content without opening another window. 这解决了无需打开另一个窗口即可打印动态内容的问题。 Additionally if the text overflows the FancyBox, the entire contents are still printed. 此外，如果文本溢出了FancyBox，则仍将打印所有内容。 (That's something I could not get to happen when I printed the FancyBox and changed the various page elements visibility styles to hidden). （这是我打印FancyBox并将各种页面元素的可见性样式更改为隐藏时无法实现的事情）。
Major Caveats 主要警告
I've tested this in IE 8 and it works, however I still cannot get this to work in Chrome. 我已经在IE 8中对其进行了测试，并且可以正常工作，但是仍然无法在Chrome中正常工作。
One reason for trying this approach was my assumption that I would be able to include within the dyanmic page content an @media print style. 尝试这种方法的一个原因是我认为我可以在动态页面内容中包含@media打印样式。 That technique does not work (in IE anyway) for some reason. 由于某种原因，该技术不起作用（无论如何在IE中）。 However, inline styles do work as do HTML markup tags (notice the <strong> tag in the jsFiddle example: var myContent). 但是，内联样式确实可以与HTML标记标记一起使用（请注意jsFiddle示例中的<strong>标记：var myContent）。 So something is strange. 所以有些奇怪。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.