如何在.Net平台上跨子域调整iframe的大小 [英] How do I resize iframe across subdomain on .Net platform

问题描述

这是问题陈述。我在两个不同的子域上运行了两个应用程序。



http://abc.myclient.net:1234/MyApplicationSite：这是作为托管环境的Sharepoint站点。我的用户控件部署在母版页的此环境中。用户控件有一个带iframe的div元素。 iframe的src设置为后面讨论的不同子域的ASP.Net Web应用程序。我正在使用jquery-UI库打开包含iFrame的div作为对话框弹出窗口。我们今后将此sharepoint网站称为消费者。



http://xyz.pqr.myclient.net:8080/MyApp/MyPage.aspx：这是.Net平台3.5上的ASP.Net Web应用程序。它作为iframe之前解释的内容。我们今后打电话给这个提供者。它包含来自jQuery-UI的手风琴控件。点击手风琴头激活事件正常触发，我执行一个javascript函数来调整父iFrame的大小。在同一个域上，我通过调用window.parent DOM元素然后从此Web应用程序调整iFrame高度来实现此目的。但是当消费者和提供者驻留在两个不同的子域上时，我现在得到Permission denied错误。我知道这是由于同源策略。



要解决此问题，我只想将Web应用程序的高度值传输到主机Sharepoint页面。来自Web应用程序的事件被触发 - accordionactivate我需要使用window.addEventListener或window.attachEvent在Sharepoint页面javascript上侦听哪个适用。因为，iframe是Sharepoint页面的一部分，我们有新的高度值，所以我们可以在听完从内容窗口引发的事件后调整它的大小。为了实现这一点，我使用了以下方法，但到目前为止还没有成功。

 document.domain 
 window.postMessage（ ）
 easyXDM 
轮询

我面临的问题是在消费者端没有收听事件（ SP站点）因此不会触发iFrame调整大小。如果有任何机构遇到类似问题，请告诉我。我需要一个干净整洁的跨浏览器解决方案。欢迎多种方法。

解决方案

首先，非常好的解释。 :)



在我之前的一个项目中我们有类似的工作，我发现使用窗口处理这个问题的跨浏览器方式.postMessage 。我也写了一个提示。



见我的提示 - 与跨域IFrame的通信 - 跨浏览器解决方案 [ ^ ]。



我们在项目中使用了这种方法并且它起作用了。所以，试着实现这个。 ：）

Here is the problem statement. I've two application running on two different subdomains.

http://abc.myclient.net:1234/MyApplicationSite: This is a Sharepoint site which is the hosting environment. My user control is deployed on this environment on the master page. The user control has a div element with an iframe. The src of iframe is set to the ASP.Net Web application of different subdomain discussed later. I'm using jquery-UI library to open up the div containing iFrame as a dialog popup. Let's call this sharepoint site as consumer henceforth.

http://xyz.pqr.myclient.net:8080/MyApp/MyPage.aspx: This is an ASP.Net Web Application on .Net platform 3.5. It serves as content inside iframe explained earlier. Let's call this provider henceforth. It contains an accordion control from jQuery-UI. On click of accordion head activate event is fired normally and I execute a javascript function to resize parent iFrame. On same domain I achieved this by calling window.parent DOM elements and then resized iFrame height from this web application. But I get Permission denied error now when consumer and provider resides on two different subdomains. I understand that this is due to the Same Origin Policy.

To fix this I just wanted to transfer the height value of web application to the host Sharepoint page. An event from from web application is fired - accordionactivate which I need to listen on the Sharepoint page javascript using window.addEventListener or window.attachEvent whichever is applicable. Since, Iframe is part of Sharepoint page and we have the new height value, so we can resize it after listening to the event raised from content window. To implement this, I used the following approaches but haven't succeeded so far.

document.domain
window.postMessage()
easyXDM
polling

The problem I face is that the event is not listened at the consumer end (SP site) and hence iFrame resize is not triggered. Let me know if any body have faced similar issues. I need a neat and clean cross - browser solution for this. Multiple approaches are welcome.

解决方案

First of all, very nicely explained. :)

We have some sort of work like this in one of my previous projects and I found a Cross Browser way of handling this using window.postMessage. I have also written a Tip on that.

See my Tip - Communication with Cross Domain IFrame - A Cross Browser Solution[^].

We have used this approach in our project and it worked. So, try to implement this. :)

这篇关于如何在.Net平台上跨子域调整iframe的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！