使用 ajax 数据更改 fancybox iframe 的内容答案

【问题标题】：Change contents of fancybox iframe with ajax data使用 ajax 数据更改 fancybox iframe 的内容
【发布时间】：2017-11-13 15:35:01
【问题描述】：

我有一个模板站点，我想用来自 ajax 调用的数据更改其内容。

我有一个打开fancybox 3 iframe 的按钮。这个页面的内容是我想要改变的。

打开fancybox的按钮：

'<i class="fa fa-info-circle fa-2x inv-details" invoiceId="' + data[index].invoiceid + '"' +
'aria-hidden="true" data-fancybox data-type="iframe" data-type="iframe" href="javascript:;" data-src="/invoice_details/"</i>'

点击事件触发ajax调用：

$('#my_in').on('click', 'i.inv_details', function () {
    var inv_id = $(this).attr("invoiceId");
    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        type: 'post',
        dataType: 'json',
        data: {
            action: 'invoice_details_ajax',
            inv_id: inv_id
        },
        done: function (data) {

            //HERE I WANT TO FIND THE CONTENTS OF THE 
            //OPEN IFRAME AND CHANGE THEM, LIKE SUCH:
            // $('.fancybox-iframe').contents().find("#test #bankgiro").text('test');
            // This above works in console, if I load jquery first, it does not work here.


        }
    });
});

iframe 的 jquery 选择器是正确的，因为我可以通过 chrome 控制台编辑页面。所以我认为问题在于它试图在页面加载之前更改页面？有什么解决办法吗？

我读过的所有答案都假设您有一个空的 fancybox iframe 页面，只需将数据附加到它。但就我而言，我已经有一个模板站点，我想更改其内容。我读过的链接：

How to show ajax response in fancybox iframe Loading dynamic AJAX content into Fancybox

【问题讨论】：

标签： javascript jquery ajax iframe fancybox-3

【解决方案1】：

从您的描述中不清楚-您想在fancybox 中打开iframed 页面，并且您想同时发出更改该页面内容的ajax 请求？只加载最后一页不是更明智吗？

我认为您只需使用 url 传递发票 ID，例如 /invoice_details/?invoiceId=YOUR_ID 并避免混淆两个请求。

【讨论】：

【解决方案2】：

如果您已经尝试过 document.ready 和 window.onload 等，我认为您似乎在使用 jQuery：

我倾向于绕过这样的事情的方式是我，但 setInterval() 每 0.5 秒或其他什么触发一次，检查所需的信息是否存在，如果存在，则执行它需要的操作，然后自行关闭.可以为需要等待页面加载的您工作吗？

【讨论】：