首页 > 编程语言> > javascript – FancyBox将DIV的内容显示为iFrame类型

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

2019-09-26 07:36:22 作者：互联网

这非常好用：

<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”

并以这种方式编码页面：

 <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.)

基本上,我想知道是否有一种方法可以动态初始化DIV的innerHTML属性并将其显示为FancyBox类型的iFrame？ (iFrame的内容将有一个打印iFrame文档的按钮.)

TIA

更新：07/28/12

正如@arttronics建议的那样,我整理了一个jsFiddle

总而言之,最终目标是能够单击FancyBox中包含的按钮,该按钮可打印FancyBox的全部内容而无需打开另一个窗口. (我想使用FancyBox作为Javascript解析内容的报表查看器.)

我假设我需要使用FancyBox的iframe播放器显示内容,但我可能错了.

jsFiddle显示：

FancyBox能够使用内联播放器显示验证为HTML页面的文本.可以通过href或内容引用文本.

但是,当播放器是iframe且内容来自href时,FancyBox容器为空.如果内容来自content属性,则FancyBox显示404错误.

只需评论和取消注释jsFiddle代码,看看我的意思.

任何关于如何达到我的目标的想法都会受到赞赏并获得投票！

TIA.

更新：07/31/2012

这个新的jsFiddle示例：Iframe report viewer works but not in FancyBox

如您所见,我尝试了几种方法在FancyBox中显示iframe.虽然FancyBox确实显示了iframe的内容,但打印功能会中断.

我认为解决这个问题的一种方法是在加载后将myContent var的内容写入FancyBox,但我不能(A)找到要写入的正确DOM节点,并且(B)我可以’当iframe src =“about：blank”时,让FancyBox使用iframe播放器显示iframe.

有什么建议么？或者您是否看到了修复jsFiddle示例的方法？

解决方法:

你真的希望< iframe src =“#myID”>< / iframe>会打开一个id为myID的元素进入iframe吗？

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

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

标签：javascript,jquery,iframe,fancybox
来源： https://codeday.me/bug/20190926/1819286.html