Question

我有一个动态显示的巨型弹出窗口，但是在加载事件后渲染图像，所以我无法在打开的事件中获得图像的值。在巨型弹出窗口中有没有任何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%');
                    }
                }
            });

Answer 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%');
        }

iframe中的大幅弹出窗口中的图像

1 个答案: