source: dev-thinkbase.net/.research/iframe-fill-and-autofit/fill-iframe-with-string.html

Last change on this file was 0b2e5cc, checked in by thinkbase <thinkbase@…>, 6 years ago

iframe-fill-and-autofit

  • Demonstrate how to fill content (HTML and Script) into a blank iframe;
  • And how to make iframe's height autofit it's content;
  • Property mode set to 100644
File size: 4.3 KB
Line 
1<!DOCTYPE html>
2
3<head>
4        <title>iframe Demo</title>
5        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6        <style>
7                html, body {height: 100%; padding:0px; margin:0px;font-family: Consolas, Comic Sans MS; font-size: 10pt;}
8            h2 {font-size: 14pt; padding: 16px; margin: 0px;}
9            hr {border-width:0px; border-top:1px solid CornflowerBlue; height:0px}
10        </style>
11</head>
12<script>
13(function(global){
14    /** 使用 html 字符串填充指定的 iframe 对象, 可以传递初始参数 */
15    var fillIFrame = function(iframeId, html, initParams){
16        if (null==initParams) initParams = {};
17        var theIframe = document.getElementById(iframeId);
18        var iFrameWindow = theIframe.contentWindow || theIframe.documentWindow;
19        var iframeDoc = iFrameWindow.document;
20        iframeDoc.open();
21        for (var o in initParams){
22            iFrameWindow[o] = initParams[o];
23        }
24        iframeDoc.write(html);
25        iframeDoc.close();
26    }
27   
28    /** 设置 iframe 高度的自适应 */
29    var setAutoHeight = function(iframe){
30        if (iframe.location){
31            //It's a window(of the iframe content)
32            setAutoHeight(iframe.frameElement);
33        }else{
34            /**
35            alert(
36                 navigator.userAgent + ":\n" +
37                "\t documentWindow: "+iframe.documentWindow+"\n"+
38                "\t contentWindow: "+iframe.contentWindow+"\n"+
39                "\t Document: "+iframe.Document+"\n"+
40                "\t contentDocument.body.offsetHeight: "
41                    +((iframe.contentDocument)?(iframe.contentDocument.body?iframe.contentDocument.body.offsetHeight:"N/A"):"N/A")+"\n"+
42                "\t Document.body.scrollHeight: "
43                    +((iframe.Document)?(iframe.Document.body?iframe.Document.body.scrollHeight:"N/A"):"N/A")
44            );
45            */
46            if (iframe.Document){
47                //IE8
48                iframe.height = iframe.Document.body.scrollHeight;
49            }else if (iframe.contentDocument){
50                //IE9, Firefox, Chrome
51                iframe.height = iframe.contentDocument.body.offsetHeight + 35;
52            }else{
53                throw "argument ["+iframe+"] is not a window or iframe"
54            }
55        }
56    }
57   
58    if (! global.thinkbaseDemo){
59        global.thinkbaseDemo = {};
60    }
61   
62    global.thinkbaseDemo.iframe = {
63        fillIFrame: fillIFrame,
64        setAutoHeight: setAutoHeight
65    };
66})(window);
67</script>
68<body>
69    <h2>HTML 文本建议使用隐藏的 textarea 存储(style="display:none")</h2>
70    <textarea id="htmlSource" readonly="true" style="width:90%;height:180px;margin:10px">
71        <head>
72            <title>iframe content</title>
73            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
74            <link rel="stylesheet" href="./jquery-ui-1.10.3/themes/sunny/jquery-ui.css" />
75            <script src="./jquery-ui-1.10.3/jquery-1.9.1.js"></script>
76            <script src="./jquery-ui-1.10.3/ui/jquery-ui.js"></script>
77            <style>
78                html, body {font-family: Consolas, Comic Sans MS; font-size: 10pt;}
79            </style>
80        </head>
81        <!--IE 中嵌入的 script 会先于 head 部分引用的 js 文件执行, 因此建议通过 onload 事件来初始化页面-->
82        <body onload="initPage()">
83            <h2>It works!</h2>
84            <div id="testDiv"></div>
85            <h2>jQuery UI</h2>
86            <div id="datepicker"></div>
87            <script>
88            function initPage(){
89                document.getElementById("testDiv").innerHTML
90                    = "<b>P1</b>: <u>"+P1+"</u>; <b>P2</b>: <u>" + P2 + "</u>; <b>Now</b>: <u>" + Now + "</u>";
91                $( "#datepicker" ).datepicker();
92                //parent.thinkbaseDemo.iframe.setAutoHeight(parent.document.getElementById("ifmWorkspace"));
93                parent.thinkbaseDemo.iframe.setAutoHeight(window);
94            }
95            </script>
96        </body>
97    </textarea>
98   
99    <hr/>
100   
101    <h2>测试用 iframe</h2>
102    <iframe id="ifmWorkspace" name="ifmWorkspace " frameborder="0" src="" style="width:90%;border:red 1px dotted;margin:10px" scrolling="no"></iframe>
103   
104    <script>
105        var html = document.getElementById("htmlSource").value;
106        thinkbaseDemo.iframe.fillIFrame("ifmWorkspace", html, {P1: "Hello", P2: "World", Now: ""+new Date()});
107    </script>
108
109</body>
Note: See TracBrowser for help on using the repository browser.