jquery 访问IFrame内的按钮

ca1c2owp  于 2023-02-18  发布在  jQuery
关注(0)|答案(3)|浏览(283)

我正在寻找一种方法来访问一个按钮内的iFrame,并触发一个单击事件时,该按钮被点击内的iFrame是在另一个域。试图深入到一个元素内的iframe已被证明是困难的。有人已经成功地把它做到这一点?

nwsw7zdq

nwsw7zdq1#

使用 AJAX 调用iframe的src来获取其内容,并将其作为站点的一部分呈现(然后可以挂钩)。
您不能直接访问来自不同域的iframe的内容,因为这会违反安全性。

pu3pd22g

pu3pd22g2#

如果我没理解错你的要求
您可以添加一个$('#iframe').load(function(){},它将监视iframe到DOM中的加载。
加载iframe后,您可以将事件侦听器附加到按钮单击

var iframe = $('#iframe').contents();
iframe.find("#button").click(function(){
 //write code to close the popup
});

上述过程可以总结如下

$('#iframe').load(function(){
        var iframe = $('#iframe').contents();
        iframe.find("#button").click(function(){
               $('#popup').close() //May depend on your popup implementation
        });
});

这里的问题是同源策略阻止脚本访问其他来源的网站内容。实际上,来源包括以下几个部分。

origin:<protocol(http/https)>://<hostname>:<port number>/path/to/page.html

如果协议、主机名和端口号不相同,则认为来源不同。
在这种情况下,由于同源安全策略,您无法从其他网站访问一个网站的内容。
为了克服这个问题,您必须使用window.postMessage()进行父子通信。
仅供参考:https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

**Window.postMessage()**方法可以安全地启用跨源通信。

假设你的父网站是example-parent.com,在Iframe中你的加载网站是example-iframe.com,让两者都使用http协议。下面是我如何解决这个问题的。在父网站中添加事件监听器来接收消息,如下所示。

window.addEventListener('message',receiveMessage,false);

function receiveMessage(event){
    var origin = event.origin || event.originalEvent.origin;
    if(origin.indexOf('http://example-iframe.com')>=0) // check if message received from intended sender
    {
        if(event.data=="intended message format") // check if data received is in correct format
        {
            // call functionality that closes popup containing iframe
        }else{ // data received is malacious
            return;
        }

    }else{  // message is not received from intended sender
        return;
    }
}

从Iframe向上级网站发布消息如下。发布消息语法:otherWindow.postMessage(message, targetOrigin, [transfer]);

function sendMessage(){
  parent.postMessage('intended message format','http://example-parent.com');
}

正确使用postMessage(),否则可能导致跨站脚本攻击。

8cdiaqws

8cdiaqws3#

我很抱歉告诉你,但是,你不能。因为这将违反CORS(跨源资源共享)的规则,浏览器已经设置,它不会让你打破这些。因为它的全能。
它将在您的控制台中给予错误“Access-Control-Allow-Origin”。
希望对你有帮助。
不过,如果你想在你的网站上做点什么,你可以问下面,我可能会给予你一个替代这样做。

相关问题