FancyBox将DIV的内容显示为iFrame类型
这非常好用:
$(document).ready(function() { $.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'}); });
也就是说,FancyBox打开并显示CNN主页。 但是,如果我将href属性更改为“#pg”
并以这种方式编码页面:
document.getElementById("pg").innerHTML = " test me now";
FancyBox打开但不显示任何文本。 (文本“now 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能够使用内联播放器显示validation为HTML页面的文本。 可以通过href
或content
引用文本。
但是,当播放器是iframe
且内容来自href
,FancyBox容器为空。 如果内容来自content
属性,则FancyBox显示404错误。
只需评论和取消注释jsFiddle代码,看看我的意思。
任何关于如何达到我的目标的想法都会受到赞赏并获得投票!
TIA。
更新:07/31/2012
这个新的jsFiddle示例: iframe报表查看器可以工作但不能在FancyBox中工作
如您所见,我尝试了几种在FancyBox中显示iframe
的方法。 虽然FancyBox确实显示了iframe
的内容,但打印function会中断。
我认为解决这个问题的一种方法是在加载后将myContent var的内容写入FancyBox,但我不能(A)找到要写入的正确DOM节点,并且(B)我可以’当iframe
src="about:blank"
时,让FancyBox使用其iframe播放器显示iframe
。
有什么建议? 或者您是否看到了修复jsFiddle示例的方法?
你真的希望会将一个id为
myID
的元素打开到iframe中吗?
如果你想打印fancyBox的内容,那么你可以添加打印按钮 – http://jsfiddle.net/s3jRA/
更新了演示 – http://jsfiddle.net/qVrLr/ – 用于创建和更新iframe的内容
通常情况下,我正在向后看事情。 解决方案(有警告)就是这样,而不是使用iframe播放器显示div元素,隐藏html中的iframe并使用内联播放器显示它。
看到这个工作示例: jsFiddle
这解决了能够在不打开另一个窗口的情况下打印动态内容的问题。 此外,如果文本溢出FancyBox,则仍会打印整个内容。 (当我打印FancyBox并将各种页面元素可见性样式更改为隐藏时,这是我无法实现的。
主要警告
我已经在IE 8中对此进行了测试,但它确实有效,但我还是无法在Chrome中使用它。
尝试这种方法的一个原因是我假设我能够在dyanmic页面内容中包含@media打印样式。 出于某种原因,该技术无论如何都无法工作(无论如何都是IE)。 但是,内联样式与HTML标记标记一样有效(请注意jsFiddle示例中的标记:var myContent)。 有点奇怪。