iframe 中的放大弹出窗口中的图像答案

【问题标题】：image in magnific popup in iframeiframe 中的放大弹出窗口中的图像
【发布时间】：2014-06-30 15:22:25
【问题描述】：

我有一个动态显示的宏伟弹出窗口，但图像是在加载事件之后呈现的，因此我无法在打开事件中获取图像的值。 magnific popup 中是否有任何 onload 事件？

 function OpenPopup(el) {
            var temp = el.innerHTML;
            var mysrc = $(temp).attr("src");
            var isobj = $.magnificPopup.open({
                items: {
                    src: mysrc,
                    onload: 'myevent()',
                },
                type: 'iframe',
                closeOnBgClick: false,
                markup: '<div class="mfp-iframe-scaler">' +
                 '<div class="mfp-close"></div>' +
                 '<iframe class="mfp-iframe" frameborder="0" onload="myevent()"></iframe>' +
                 '<div class="mfp-bottom-bar">' +
                   '<div class="mfp-title"></div>' +
                 '</div>' +
               '</div>',
                callbacks: {
                    beforeOpen: function () {
                        console.log('Start of popup initialization');
                    },
                    elementParse: function (item) {
                        // Function will fire for each target element
                        // "item.el" is a target DOM element (if present)
                        // "item.src" is a source that you may modify
                        debugger;
                        console.log('Parsing content. Item object that is being parsed:', item);
                    },
                    change: function () {
                        console.log('Content changed');
                        console.log(this.content); // Direct reference to your popup element
                    },
                    resize: function () {
                        console.log('Popup resized');
                        // resize event triggers only when height is changed or layout forced
                    },
                    open: function () {
                        console.log('Popup is opened');
                        debugger;
                        var iframe = $.magnificPopup.instance,
          t = $(iframe.currItem.el[0]);
                        var contents = iframe.contents();
                        $(contents).css('max-width', '100%');
                        $(contents).css('max-height', '100%');
                    }
                }
            });

【问题讨论】：

标签： iframe magnific-popup

【解决方案1】：

不是一个合适的解决方案，我添加了一个定时事件，该事件会在图像加载后调整图像大小。必须玩很多才能获得完美的时间，以免出现故障。代码如下：

function OpenPopup(el) {
            var temp = el.innerHTML;
            var mysrc = $(temp).attr("src");
            var isobj = $.magnificPopup.open({
                items: {
                    src: mysrc,
                },
                delegate: 'a',
                type: 'iframe',
                closeOnBgClick: false,
            });
            setTimeout(setImage, 500);
        };
function setImage() {
            var iframe = $('.mfp-iframe');
            var contents = iframe.contents();
            $(contents).find('img').attr('width', '100%');
            $(contents).find('img').attr('height', '100%');
        }

【讨论】：