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

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

javascript jquery iframe

Javascript FancyBox将DIV的内容显示为iFrame类型,javascript,jquery,iframe,fancybox,Javascript,Jquery,Iframe,Fancybox,这非常好： <script type="text/javascript"> $(document).ready(function() { $.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'}); }); </script> $（文档）.ready（函数

这非常好：

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


$（文档）.ready（函数（）{
$.fancybox（{'href'：'http://www.cnn.com“，'frameWidth'：500，'frameHeight'：500，'hideOnContentClick'：false，'type'：'iframe'}）；
});

也就是说，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>


document.getElementById（“pg”）.innerHTML=“立即测试我”；

FancyBox打开，但不显示任何文本。（文本“text me now”显示在#pg div元素中。请注意，它在页面末尾被分配给div的innerHTML。）

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

短暂性脑缺血发作

更新：2012年7月28日
正如@arttronics所建议的，我将
总而言之，最终目标是能够单击FancyBox中包含的按钮，该按钮可以打印FancyBox的全部内容，而无需打开另一个窗口。（我想使用FancyBox作为Javascript解析内容的报告查看器。）
我假设我需要使用FancyBox的iframe播放器显示内容，但我可能错了
JSFIDLE显示：
FancyBox能够使用内联播放器显示验证为HTML页面的文本。文本可以通过
href
或
内容
引用
但是，当播放器是
iframe
且内容来自
href
，则FancyBox容器为空。如果内容来自
content
属性，则FancyBox显示404错误
只需注释并取消注释JSFIDLE代码，就可以了解我的意思
任何关于我如何实现我的目标的想法都将受到赞赏，并将获得投票
蒂亚
更新日期：2012年7月31日
这个新的JSFIDLE示例：
如您所见，我尝试了几种方法在FancyBox中显示
iframe
。虽然FancyBox确实显示
iframe
的内容，但打印功能会中断
我认为解决这个问题的一种方法是在加载后将myContent变量的内容写入FancyBox，但我无法（A）找到要写入的正确DOM节点，以及（B）当
iframe
src=“about:blank”
时，我无法让FancyBox使用其iframe播放器显示
iframe

有什么建议吗？或者您看到了修复JSFIDLE示例的方法了吗？
正如通常的情况一样，我是在向后看问题。解决方案（附带警告）是这样的，而不是使用iframe播放器显示div元素，而是在html中隐藏iframe并使用内联播放器显示它
请参见此工作示例：
这解决了无需打开另一个窗口即可打印动态内容的问题。此外，如果文本溢出FancyBox，则仍会打印全部内容。（当我打印FancyBox并将各种页面元素可见性样式更改为隐藏时，我无法实现这一点）
主要注意事项
我已经在IE8中测试过了，但仍然无法在Chrome中使用

尝试这种方法的一个原因是我假设我能够在动态页面内容中包含@media打印样式。由于某种原因，这种技术（在IE中）不起作用。但是，内联样式与HTML标记标记一样有效（请注意JSFIDLE示例中的
标记：var myContent）。所以有点奇怪。
你真的认为
会在iframe中打开一个id为
myID
的元素吗
如果要打印fancyBox的内容，则可以添加打印按钮-

更新的演示--要创建和更新iframe的内容，请尝试使用FancyBox HTML
inline player
，而不是
iframe player
@arttronics，我认为这会奏效。我明天还要做更多的测试。同时，给你一张赞成票。谢谢。不幸的是，inline类型不允许我复制iframe类型的行为。使用iframe，我可以在FancyBox中显示页面上的一个按钮，其中onclick（）处理程序的编码如下
window.print（）
，并且查看器可以很好地打印FancyBox内容。即使我的内联内容看起来是一个完整的HTML文档，DOM也不会将其视为文档，因此
print（）
方法会打印主窗口的内容。（我知道我可以通过打开一个新窗口来打印FancyBox的内容，但如果可能的话，我希望避免这种情况。）注意，当此代码打开FancyBox并显示内容时，调用
window.print（）不起作用：$.fancybox（{'content'：'Print-MePrint-MePrint'，'Width'：500，'hideOnContentClick'：false，'type'：'inline'）@arttronics请参阅。请注意，FancyBox仅打印部分内容。如果取消注释type 属性，div的内容将不再出现在FancyBox中。不要混合使用梨和苹果。您在v1.3.4中提到的问题与v2无关。x@JFK，我看不出我是怎样把梨和苹果混合在一起的。我的评论特别提到了v1.3.4，其目的是如果有人在尝试代码，并且碰巧在尝试FB的版本，那么除了有文档记录的修复外，还有一个问题。只是想阻止别人把头发拔出来。我很感谢你的评论和支持，如果你认为我的评论不公平或不准确，我很乐意编辑。IMHO，因为你的答案在Chrome上完全失败了，这不是一个可以接受的答案，也不值得赏金。不过，我