Question

这不是stackoverflow上可能存在的任何重复项。这是问题陈述。我在两个不同的子域上运行了两个应用程序。

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

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

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

document.domain的
window.postMessage（）
easyXDM
轮询

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

Answer 1

我的解决方案是设置一个反向代理服务器（使用Apache），将多个域中的页面作为单个域拉入（对客户端来说是什么），然后我可以轻松地跨越IFrame边界。这种方式有效，您的最终用户可以获得代理服务器的单个域名。在编写IFrame代码时，请使用代理服务器地址，该地址将路由回MyApp。有关反向代理的信息，请参阅此页面：Apache Geronimo 仅在您的情况下，将其添加到httpd.conf文件：

ProxyPass / http://abc.myclient.net:1234/MyApplicationSite
ProxyPass /MyApp http://xyz.pqr.myclient.net:8080/MyApp/MyPage.aspx
ProxyPassReverse /MyApp http://xyz.pqr.myclient.net:8080/MyApp/MyPage.aspx

Answer 2

我们所需要的只是正确使用和理解postMessage和jQuery。首先是提供者，即ASP.Net Web应用程序，在我的手风琴js代码中，我调用postSize方法。

$(".my-accrdion-class").accordion({
    collapsible: true,
    active: false,
    heightStyle: "content",
    activate: function (event, ui) {
        postSize();
    }
});

然后我像这样定义postSize。

    function postSize() {
       var height = jQuery(iFrameContentSelector).height();
       data = { 'height': height };
       window.parent.postMessage(JSON.stringify(data),"*");
    }

您需要包含JSON2库。在这里，如果您只有一个消费者，那么代替*也给出了具有端口号和协议的正确URL。在我们的例子中，我对消费者端的原点进行了检查，并且传递的数据是非敏感的。因此，目前没有安全问题。

现在在消费者端，即在用于用户控制的javascript内。添加以下代码。

    // Here "addEventListener" is for standards-compliant web browsers and    "attachEvent" is for IE Browsers.
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

    // Listen to message from child IFrame window
    eventer(messageEvent, function (e) {
    if (e.origin == 'http://xyz.pqr.myclient.net:8080') {
      var window_height = JSON.parse(e.data);
      var frame = $("#iFrameDiv iframe");
      frame.height(window_height.height);
      }
    }, false);

就是这样。这里iFrameDiv包含我的iFrame，它是一个服务器控件。

可以找到相同的讨论here

干杯，纳曼

IFRAME在.Net平台上跨子域调整大小

2 个答案: