与jQuery动态加载iFrame的交互

通过单击X.我想隐藏安装我的iFrame的div。我用jQuery插入了iFrame。我用我的例子创建了一个jsFiddle。现在，如果我点击X时可以“点击”到控制台，我会很高兴。与jQuery动态加载iFrame的交互

这是我的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。

来源

2017-04-04 ToddT

你会在这里遇到跨网问题，你不能访问iframe中具有不同域名的元素。 – Roljhon

我实际上使用的是一个代理服务器，它可以解决跨域问题..虽然好想法！ – ToddT

好吧，那太棒了，你可以访问元素'iframe.contentWindow.document'或'iframe.contentDocument'。由于jsfiddle的跨域问题，无法创建片段 – Roljhon

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

获取参照该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，如果你想。我希望它可以帮助您找到一种解决方法，因为我无法创建片段。

来源

2017-04-04 17:22:08 Roljhon

嗯......你可以尝试从jQuery的流媒体的网站是这样的： https://jsfiddle.net/uxc930xr/15/

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

可惜这不能的jsfiddle因为它阻止jQuery文档从其他渠道运行

来源

2017-04-04 17:26:32 RobiNERD

与jQuery动态加载iFrame的交互

回答

相关问题