get-start添加postmessage

be-fe · Aug 15, 2016 · 301d08f · 301d08f
1 parent d9d95cf
commit 301d08f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 27 deletions.
diff --git a/demos/doc.html b/demos/doc.html
@@ -126,27 +126,31 @@ <h5>third part</h5>
 </div>
 <script>
     function iFrameHeight() {
-//         var ifm = document.getElementById("iframe");
-//         var subWeb = document.frames ? document.frames["iframe"].document : ifm.contentDocument;
-//         console.log(subWeb)
-//         if (ifm != null && subWeb != null) {
+        //部分浏览器的跨域安全策略会导致无法获取子页面的docuemnt;
+        try {
+            var ifm = document.getElementById("iframe");
+            var subWeb = document.frames ? document.frames["iframe"].document : ifm.contentDocument;
+        } catch(e) {
+            console.log(e);
+        }
+        if (ifm != null && subWeb != null) {
 
-//             // 从大的高度跳转到低的高度,底部会产生空白!先设置为0,再撑起来!完美解决!
+            // 从大的高度跳转到低的高度,底部会产生空白!先设置为0,再撑起来!完美解决!
 
-//             ifm.height = 0;
-//             ifm.height = subWeb.body.scrollHeight;
+            ifm.height = 0;
+            ifm.height = subWeb.body.scrollHeight;
 
-// //            console.log(subWeb.body.scrollHeight);
-// //            console.log(ifm.contentWindow.document.body);// 元素查看区域正确,但是高度依旧不对.
-// //            console.log(window.document);
+//            console.log(subWeb.body.scrollHeight);
+//            console.log(ifm.contentWindow.document.body);// 元素查看区域正确,但是高度依旧不对.
+//            console.log(window.document);
 
-//             // 通过如下方法,能够正确处理编辑器的双滚动条问题,但是画面会有抖动.这个双滚动条问题是因为编辑器的渲染需要时间,他会撑大 iframe 的高度.因而会出现双滚动条.
-//             // 而轮播为什么下面会有很大的空白呢?发现其 document 和 body 的高度不一致导致的
-//            // setTimeout(function () {
-//            //     ifm.height = subWeb.body.scrollHeight;
-//            // }, 100);
+            // 通过如下方法,能够正确处理编辑器的双滚动条问题,但是画面会有抖动.这个双滚动条问题是因为编辑器的渲染需要时间,他会撑大 iframe 的高度.因而会出现双滚动条.
+            // 而轮播为什么下面会有很大的空白呢?发现其 document 和 body 的高度不一致导致的
+           // setTimeout(function () {
+           //     ifm.height = subWeb.body.scrollHeight;
+           // }, 100);
 
-//         }
+        }
     }
     window.addEventListener('message', function(e) {
         if (e.data) {

diff --git a/demos/get-start.html b/demos/get-start.html
@@ -53,5 +53,6 @@ <h3>查看Demo</h3>
     <p>一个使用iToolkit + jQuery + Bootstrap制作的Demo原型：</p>
     <a href="http://be-fe.github.io/iToolkit-demo/" target="_blank">Demo展示页</a><br>
     <a href="https://github.com/be-fe/iToolkit-demo" target="_blank">Demo页源代码</a><br>
+    <script src="js/js-code.js"></script>
 </body>
 </html>
diff --git a/demos/js/js-code.js b/demos/js/js-code.js
@@ -1,17 +1,23 @@
 (function() {
     var demoArea = document.getElementById('demo-script');
-    var sourceCodeArea = document.createElement('pre');
-    sourceCodeArea.innerHTML = '<code class="language-javascript">' + demoArea.innerHTML + '<\/code>';
-    if (document.querySelector('.container')) {
-        document.querySelector('.container').appendChild(sourceCodeArea)
-    }
-    else {
-        document.body.appendChild(sourceCodeArea);
+    if (demoArea) {
+        var sourceCodeArea = document.createElement('pre');
+
+        sourceCodeArea.innerHTML = '<code class="language-javascript">' + demoArea.innerHTML + '<\/code>';
+        if (document.querySelector('.container')) {
+            document.querySelector('.container').appendChild(sourceCodeArea)
+        }
+        else {
+            document.body.appendChild(sourceCodeArea);
+        }
     }
 
-    setTimeout(function() {
-        var height = parseInt(window.getComputedStyle(document.body).height) + 40;
-        window.parent.postMessage(height, '*');
-    }, 100);
+    if (window.postMessage) {
+        setTimeout(function() {
+            var height = parseInt(window.getComputedStyle(document.body).height) + 40;
+            console.log(height);
+            window.parent.postMessage(height, '*');
+        }, 100);
+    }
 
 })();