gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:37:08 25 4
gpt4 key购买 nike

这工作得很好:

<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 打开但没有显示任何文本。 (文本“现在给我发短信”显示在 #pg div 元素中。请注意,它已分配给页面末尾的 DIV 的 innerHTML。)

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

TIA

更新:2012 年 7 月 28 日

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

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

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

jsFiddle 显示:

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

但是,当播放器是iframe 并且内容来自href 时,FancyBox 容器是空的。如果内容来自 content 属性,FancyBox 会显示 404 错误。

只需注释和取消注释 jsFiddle 代码即可了解我的意思。

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

TIA。

更新:2012 年 7 月 31 日

这个新的 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 - FancyBox 将 DIV 的内容显示为 iFrame 类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11678956/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com