如何在 Wordpress 插件中使用 jQuery 从 Iframe 调用 Iframe？答案

【问题标题】：How to call Iframe from an Iframe using jQuery in Wordpress Plugin?如何在 Wordpress 插件中使用 jQuery 从 Iframe 调用 Iframe？
【发布时间】：2019-05-29 14:24:02
【问题描述】：

我有一个从 Wordpress Woocommerce 商店中的 iFrame 调用的应用程序（WordPress 插件）。一切正常。该应用程序生成产品并将它们添加到购物车，并允许访问者进入购物车并付款。使用 jQuery 模态。

目前我正在使用重定向来为访问者提供对购物车的访问权限。但是，我希望访客在结帐后留下（回来）。这个想法是所有访问者交互都由模态处理这样访问者可以继续使用应用程序并生成更多产品。

这可能吗？有更好的选择吗？

我目前的代码如下：

function contact_woo_shop(orderfilename, urlAtts, counts, table){
var pid=0
jQuery.post(
            ts_woo.ajax_url, 
            {'action': 'do_ts_woo','order': orderfilename,             
   'board': urlAtts,'table': table},
            function(response) {
                  if(response.success){
                     pid = response.data;
                     console.log("do_ts_woo. SUCCESS response="+response.data);
  /* I WISH TO CANCEL THIS REDIRECT in favor of another MOdal with Iframe below*/
                     window.location.replace("https://orig-site.co.il/cart/?add-to-cart="+response.data);

                  } else {
                     console.log("do_ts_woo. FAILURE response="+response.data);
                  }
            }
).done(function(response) {
  console.log("DONE do_ts_woo. DONE response="+response.data);

   /* I wish to have the Modal & Iframe here */
  jQuery("#dialog").dialog({
        autoOpen: false,
        show: "fade",
        hide: "fade",
        modal: true,
        open: function (ev, ui) {
          jQuery('#myIframe').attr('src',"https://orig-site.co.il/cart/?add-to-cart="+pid);
        },
        height: 'auto',
        width: 'auto',
        resizable: true,
        title: 'Tilesim'
      });

     jQuery("#opener").click(function () {
        jQuery("#dialog").dialog("open");
        return false;
      })

 })
 .fail(function(msg) {
    alert( "error msg="+msg );
 })
 .always(function() {
   // alert( "finished" );
 });

}

【问题讨论】：

标签： jquery wordpress iframe woocommerce

【解决方案1】：

您可以查看已经完成此任务的插件，看看他们是如何完成此任务的：[https://wordpress.org/plugins/woo-awesome-checkout-popup-form/][1]
或者您可以通过在一定时间后自动将用户重定向到订单完成页面来完成此操作。例如，等待 1 秒，然后重定向回商店页面。

【讨论】：

谢谢。我更喜欢第一个选项。我会看看它。你试过了吗？它是否处理 Woocomrece 附带的所有链接？我可以在 jQuery modal 中结帐——而不是 iFarme，所以任何链接都会带你离开 Modal 窗口。我需要这种情况的解决方案我想知道您的第一个选项上的插件是否支持？

【解决方案2】：

我设法使用jquery iframe dialog 的漂亮干净的解决方案从 iFrame 中打开了一个 iFrame 从技术上讲，这个序列似乎没有限制。 @NickC感谢您的帮助！

最后一点：到目前为止，我一直在努力避免使用 iframe。这是应用程序 (SAAS) 代表客户端运行客户端代码的第一个示例。这个用例不同于运行（哑）iFrame(some.html)。

【讨论】：