arale-dialog - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0

HISTORY.md

@@ -5,6 +5,14 @@ # 历史记录
 
+## 1.5.0
+
+`new` #91 使用 arale-messenger 进行跨域支持。[演示](./examples/cross-domain-iframe.html)
+
+`fixed` #87 #88 彻底修复两个对话框关闭时的遮罩显示问题。
+
 ## 1.4.1
 
 `fixed` [#87](https://github.com/aralejs/dialog/pull/87) 修复两个对话框关闭时的遮罩显示问题。
+
 `fixed` #80 修复 top 为负数的场景。
+
 `fixed` #71 删除了多余的 arale-easing 依赖。
@@ -11,0 +19,0 @@

package.json

 {
   "name": "arale-dialog",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Dialog 是通用对话框容器，提供显隐关闭、遮罩层、内嵌iframe、内容区域自定义以及模态对话框等功能。",
@@ -34,5 +34,7 @@ "keywords": [
     "arale-templatable": "0.10.0",
-    "spm-handlebars-runtime": "1.3.0"
+    "spm-handlebars-runtime": "1.3.0",
+    "arale-messenger": "2.1.0"
   },
   "devDependencies": {
+    "arale-widget": "1.2.0",
     "spm-expect.js": "0.3.1",
@@ -39,0 +41,0 @@ "spm-sinon": "1.6.0",

README.md

@@ -24,7 +24,7 @@ # Dialog
 ```js
-seajs.use('dialog', function(Dialog) {
-    var o = new Dialog({
-        trigger: '#trigger',
-        content: '<div>这是 dialog 容器的内容</div>'
-    });
+var Dialog = require('dialog');
+
+var o = new Dialog({
+    trigger: '#trigger',
+    content: '<div>这是 dialog 容器的内容</div>'
 });
@@ -36,7 +36,7 @@ ```
 ```js
-seajs.use('dialog', function(Dialog) {
-    var o = new Dialog({
-        trigger: '#trigger',
-        content: 'https://www.alipay.com/'
-    });
+var Dialog = require('dialog');
+
+var o = new Dialog({
+    trigger: '#trigger',
+    content: 'https://www.alipay.com/'
 });
@@ -43,0 +43,0 @@ ```

src/dialog.js

@@ -5,3 +5,4 @@ var $ = require('spm-jquery'),
     Events = require('arale-events'),
-    Templatable = require('arale-templatable');
+    Templatable = require('arale-templatable'),
+    Messenger = require('arale-messenger');
 
@@ -139,5 +140,8 @@ // Dialog
     if (this._type === 'iframe' && this.iframe) {
-      this.iframe.attr({
-        src: 'javascript:\'\';'
-      });
+      // 如果是跨域iframe，会抛出异常，所以需要加一层判断
+      if (!this._isCrossDomainIframe) {
+        this.iframe.attr({
+          src: 'javascript:\'\';'
+        });
+      }
       // 原来只是将 iframe 的状态复原
@@ -248,10 +252,14 @@ // 但是发现在 IE6 下，将 src 置为 javascript:''; 会出现 404 页面
       // 避免重复存放
-      var existed = false;
-      for (var i = 0; i < mask._dialogs.length; i++) {
+      var existed;
+      for (var i=0; i<mask._dialogs.length; i++) {
         if (mask._dialogs[i] === that) {
-          existed = true;
+          existed = mask._dialogs[i];
         }
       }
-      // 依次存放对应的对话框
-      if (!existed) {
+      if (existed) {
+        // 把已存在的对话框提到最后一个
+        mask._dialogs.splice(mask._dialogs.indexOf(existed), 1);
+        mask._dialogs.push(existed);
+      } else {
+        // 存放新的对话框
         mask._dialogs.push(that);
@@ -270,15 +278,21 @@ }
 
-    // 当且仅当最后一个 dialog 是当前 dialog 时，才移除
-    // 因为 hide 与 destroy 都会调用 _hideMask，此举用于避免错误移除
-    if (mask._dialogs &&
-        mask._dialogs[mask._dialogs.length - 1] === this) {
-      mask._dialogs.pop();
-    }
+    // 移除 mask._dialogs 当前实例对应的 dialog
+    var dialogLength = mask._dialogs.length;
+    for (var i=0; i<dialogLength; i++) {
+      if (mask._dialogs[i] === this) {
+        mask._dialogs.splice(mask._dialogs.indexOf(this), 1);
 
-    if (mask._dialogs && mask._dialogs.length > 0) {
-      var last = mask._dialogs[mask._dialogs.length - 1];
-      mask.set('zIndex', last.get('zIndex'));
-      mask.element.insertBefore(last.element);
-    } else {
-      mask.hide();
+        // 如果 _dialogs 为空了，表示没有打开的 dialog 了
+        // 则隐藏 mask
+        if (mask._dialogs.length === 0) {
+          mask.hide();
+        }
+        // 如果移除的是最后一个打开的 dialog
+        // 则相应向下移动 mask
+        else if (i === dialogLength - 1) {
+          var last = mask._dialogs[mask._dialogs.length - 1];
+          mask.set('zIndex', last.get('zIndex'));
+          mask.element.insertBefore(last.element);
+        }
+      }
     }
@@ -314,2 +328,3 @@ },
     }
+
     // 开始请求 iframe
@@ -320,2 +335,3 @@ this.iframe.attr({
     });
+
     // 因为在 IE 下 onload 无法触发
@@ -330,10 +346,17 @@ // http://my.oschina.net/liangrockman/blog/24015
       }
-      // 绑定自动处理高度的事件
-      if (that.get('autoFit')) {
-        clearInterval(that._interval);
-        that._interval = setInterval(function () {
-          that._syncHeight();
-        }, 300);
+
+      // 是否跨域的判断需要放入iframe load之后
+      that._isCrossDomainIframe = isCrossDomainIframe(that.iframe);
+
+      if (!that._isCrossDomainIframe) {
+        // 绑定自动处理高度的事件
+        if (that.get('autoFit')) {
+          clearInterval(that._interval);
+          that._interval = setInterval(function () {
+            that._syncHeight();
+          }, 300);
+        }
+        that._syncHeight();
       }
-      that._syncHeight();
+
       that._setPosition();
@@ -374,4 +397,29 @@ that.trigger('complete:show');
     });
+
+    // 跨域则使用arale-messenger进行通信
+    var m = new Messenger('parent', 'arale-dialog');
+    m.addTarget(this.iframe[0].contentWindow, 'iframe1');
+    m.listen(function (data) {
+      data = JSON.parse(data);
+      switch (data.event) {
+        case 'close':
+          that.hide();
+          break;
+        case 'syncHeight':
+          that._setHeight(data.height.toString().slice(-2) === 'px' ? data.height : data.height + 'px');
+          break;
+        default:
+          break;
+      }
+    });
+
   },
 
+  _setHeight: function (h) {
+    this.contentElement.css('height', h);
+    // force to reflow in ie6
+    // http://44ux.com/blog/2011/08/24/ie67-reflow-bug/
+    this.element[0].className = this.element[0].className;
+  },
+
   _syncHeight: function () {
@@ -395,6 +443,4 @@ var h;
       }
-      this.contentElement.css('height', h);
-      // force to reflow in ie6
-      // http://44ux.com/blog/2011/08/24/ie67-reflow-bug/
-      this.element[0].className = this.element[0].className;
+      this._setHeight(h);
+
     } else {
@@ -423,4 +469,2 @@ clearInterval(this._interval);
 // 让目标节点可以被 Tab
-
-
 function toTabed(element) {
@@ -433,9 +477,6 @@ if (element.attr('tabindex') == null) {
 // 获取 iframe 内部的高度
-
-
 function getIframeHeight(iframe) {
   var D = iframe[0].contentWindow.document;
   if (D.body.scrollHeight && D.documentElement.scrollHeight) {
-    return Math.min(
-    D.body.scrollHeight, D.documentElement.scrollHeight);
+    return Math.min(D.body.scrollHeight, D.documentElement.scrollHeight);
   } else if (D.documentElement.scrollHeight) {
@@ -447,1 +488,13 @@ return D.documentElement.scrollHeight;
 }
+
+
+// iframe 是否和当前页面跨域
+function isCrossDomainIframe(iframe) {
+  var isCrossDomain = false;
+  try {
+    iframe[0].contentWindow.document;
+  } catch (e) {
+    isCrossDomain = true;
+  }
+  return isCrossDomain;
+}

No alert changes

Improved metrics

Total package byte prevSize

32986

increased by15.86%

Number of package files

11

increased by10%

Lines of code

632

increased by7.85%

Worsened metrics

Dependency count

6

increased by20%

Dev dependency count

4

increased by33.33%

Dependency changes

• + Addedarale-messenger@2.1.0

• + Addedarale-messenger@2.1.0(transitive)