javascript - Fancybox iframe 的内容在启动页面上用 js 编码 - 如何在页面加载时打开?

标签 javascript jquery fancybox fancybox-2

感谢this answer ,我有一种在页面加载时启动 fancybox iframe 的方法:http://www.casedasole.it/fancybox/A.html

This answer展示如何在启动 iframe 的页面中打开一个 fancybox iframe,其内容以 javascript 编码:http://www.casedasole.it/fancybox/B.html

是否有某种方法可以让 B 做 A 所做的事情 - 即在页面加载时启动自身?

注意:隐藏的 div 方法 ( see here ) 不起作用,因为我需要能够在 iframe 打开后进行导航。

最佳答案

就这样做:

var myContent = "..."; // html as option "B"

jQuery(document).ready(function ($) {
    $.fancybox({
        // API options as "B"
        // build the iframe
        content: '<iframe id="myFrame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" src="about:blank"></iframe>',
        afterShow: function () {
            var oIframe = document.getElementById('myFrame');
            var iframeDoc = (oIframe.contentWindow.document || oIframe.contentDocument);
            iframeDoc.open();
            iframeDoc.write(myContent);
            iframeDoc.close();
        }
    });
}); // ready

参见JSFIDDLE

注意myContent变量包含完整 html结构,包括DOCTYPE , <html> , <head>一个<body>部分。虽然这不是强制性的,但它可以让您更好地控制初始 (iframed) 页面的设置。

另请注意,在我的 jsfiddle 中,出于整洁目的,我将基本内容(html 基本结构)与自定义内容(如您的示例中的 <div> )分开了;)

引用资料:

关于javascript - Fancybox iframe 的内容在启动页面上用 js 编码 - 如何在页面加载时打开?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26673658/

相关文章:

javascript - Jquery Fancybox autoscale 没有按预期工作?

javascript - 返回 promise 的 ember Controller 中的单元测试操作

javascript - 如何添加包含 AM 和 PM 的 24 小时到 12 小时时间戳?

javascript - 如何修复 div 类 ="row"angular + bootstrap 中的元素

javascript - jQuery 按键输入不起作用

javascript - 作为匿名函数的默认事件处理程序与函数名称之间有什么区别

javascript - 单击子项时需要干净的 jQuery 来更改父类

javascript - 删除添加的 div 应导致计数器减少,并且应按顺序重命名下一个后续 div

javascript - 更改即时创建的引导模式标题

jquery - 如何将按钮助手中的按钮添加到标题(Fancybox 2)?