与 jQuery 动态加载的 iFrame 交互答案

【问题标题】：Interact with jQuery dynamically loaded iFrame与 jQuery 动态加载的 iFrame 交互
【发布时间】：2017-04-04 17:02:06
【问题描述】：

通过单击 X。我想隐藏我的 iFrame 所在的 div。我用 jQuery 插入了 iFrame。我用我的例子创建了一个jsFiddle。现在，如果我可以在点击 X 时“点击”进入控制台，我会很高兴。

这是我的 jQuery，它插入并尝试隐藏包含我的 iFrame 的 div。

$(document).ready(function(){  
  if (document.location.pathname === '/account'){
  console.log("loaded up");
  $('body').append($.parseHTML(frame));
}

$('#fresh-credit-button').on('click', function(){
  console.log("clicked");
});

});

我没有跨域问题，因为我通过 Shopify 使用 appProxy。

【问题讨论】：

您将在此处遇到跨域问题，您无法访问具有不同域的 iframe 中的元素。
我实际上正在使用代理，它可以解决跨域问题.. 好主意！
好吧，那太好了，您可以访问元素iframe.contentWindow.document 或iframe.contentDocument。由于 jsfiddle 的跨域问题，无法创建 sn-p

标签： javascript jquery html css iframe

【解决方案1】：

如果你已经修复了跨域问题，你可以这样做。

获取对该 iframe 的引用：

var iframe = document.querySelector('iframe[src="https://test-4658.myshopify.com/apps/proxy/credit"]')

然后从那里像下面这样：

var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

然后附加onclick事件

var closeBtn = innerDoc.getElementById('fresh-credit-button');

closeBtn.addEventListener('click',function(){
    //close div here
    //same idea when accessing the div element from the iframe
});

这只是用原生 JS 编写的，如果你愿意，你可以通过 jQuery 来实现。我希望它可以帮助您找到从头开始修复的方法，因为我无法创建 sn-p。

【讨论】：

【解决方案2】：

嗯...您可以尝试像这样从 jquery 流式传输网站： https://jsfiddle.net/uxc930xr/15/

$('#message').load('https://test-4658.myshopify.com/apps/proxy/credit');

不幸的是，这无法在 jsfiddle 上运行，因为它阻止了来自其他来源的 jquery html

【讨论】：