FancyBox将DIV的内容显示为iFrame类型

Kar*_*arl 4 javascript iframe jquery fancybox

这工作得很好:

<script type="text/javascript">
   $(document).ready(function() { 
       $.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
   });
</script> 
Run Code Online (Sandbox Code Playgroud)

也就是说,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>
Run Code Online (Sandbox Code Playgroud)

FancyBox打开,但未显示任何文本。(文本“立即发短信给我”显示在#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代码即可了解我的意思。

任何有关如何实现目标的想法都将受到赞赏,并将获得投票!

TIA。

更新:2012年7月31日

这个新的jsFiddle示例:iframe报表查看器有效,但在FancyBox中无效

如您所见,我尝试了几种iframe在FancyBox中显示的方法。当FancyBox确实显示的内容时iframe,打印功能将中断。

我认为解决此问题的一种方法是将myContent变量的内容在加载后写入FancyBox,但是我(A)找不到要写入的DOM节点,而(B)我可以。 t时让FancyBox显示iframe使用其iframe播放器的iframe src="about:blank"

有什么建议么?还是看到一种解决jsFiddle示例的方法?

Jan*_*nis 5

您是否真的希望这<iframe src="#myID"></iframe>myID在iframe中打开一个具有ID的元素?

如果要打印fancyBox的内容,则可以添加打印按钮-http: //jsfiddle.net/s3jRA/

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