Question

我有一个模板站点，我想用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

Answer 1

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

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

Answer 2

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

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

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

2 个答案: