Angular2x中使用iFrame （之一）（实用、赞）

快来打我* 2023-06-30 05:26 1阅读 0赞

先上图：  
红框是iFrame嵌入的子页面  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]  
之前在《[利用iframe嵌入html页面 （实用, 赞）][iframe_html_ _]》已试过了iFrame嵌入html，但转到Angular中遇到以下几个问题：

一、利用DomSanitizer, SafeResourceUrl解决xss错误；  
参考：  
[Angular 8 使用 iframe][Angular 8 _ iframe]  
[Angular 2 DomSanitizer][]

二、用postMessage处理父子相互传值，解决iFrame高度问题；  
参考：  
[postmessage解决iframe跨域嵌套，调用父页面方法【跨页面通信】][postmessage_iframe]  
[iframe和父页面相互传值,并兼容跨域问题.(项目实测成功) from accessing a cross-origin frame][iframe_._ from accessing a cross-origin frame]  
  
三、解决返回时出现 ‘Cannot GET /null’错误（偶发性），要再点返回才能返回上一页；  
原因：  
       当iframe加载时未准备好src所需的url时，就会出现这种情况；

解问办法：  
       加上 \*ngIf="htmlFileUrl"

【父页面 html】

【子页面 html】

<head>
        <meta charset="utf-8" />
        <script>
            window.onload = function () {
                var doc = window.document;
                var body = doc.body;
                var html = doc.documentElement;
                var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
    
                window.parent.postMessage(height, '*');
            }
        </script>
    </head>
    
    <img src="http://localhost:3073/htmlfile/MarketAction/9E395AC5-6B64-4B8E-95E6-0ABD46BCB589/202001131729000.jpeg" style="width:100%" />
    <P style='font-size: 18px;'>
        你好吗！
    </P>
    <div>
        <span style='font-size: 12px; color: orange;'>你猜猜!</span>
        <span style="font-size:1.8rem; color: red; font-weight: 800; margin-left: 10px;">错了！</span>>
    </div>

【主页面ts】

...
    import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
    
    
    @IonicPage({
        name: 'sign-in',
    })
    @Component({
        selector: 'sign-in',
        templateUrl: 'sign-in.html'
    })
    export class SignInPage {
        ...
        private htmlFileUrl: SafeResourceUrl;
        private iFrameHeight: number;
    
        constructor(
            ...
            private sanitizer: DomSanitizer
        ) {
           ...
        }
    
        ngOnInit() {
            this.loadData();
    
            window.addEventListener('message', (event) => {
                //event.data获取iFrame子页面传过来的数据
                this.iFrameHeight = event.data;
            });
        }
    
        private getiFrameHeight() {
            let h = this.iFrameHeight && this.iFrameHeight > 0 ? this.iFrameHeight : 100;
            return { 'height': h.toString() + 'px' };
        }
    
        private loadData() {
            let params = {
            ...
            };
            this.appService.callBo("xxx", "xxx", params).subscribe((res) => {
                if (res.ErrCode == 0) { 
                    let fileUrl = res.Data.HtmlFileUrl;                 
                    this.htmlFileUrl = his.sanitizer.bypassSecurityTrustResourceUrl(fileUrl);
                } else {
                    this.utils.showError(res.ErrMsg);
                }
            });
        }
    
        private submit() {
            //
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200115113619639.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs=,size_16,color_FFFFFF,t_70
[iframe_html_ _]: https://blog.csdn.net/chelen_jak/article/details/103970193
[Angular 8 _ iframe]: https://www.jianshu.com/p/902ad13c819c
[Angular 2 DomSanitizer]: https://segmentfault.com/a/1190000008809095
[postmessage_iframe]: https://blog.csdn.net/github_37847992/article/details/80241154
[iframe_._ from accessing a cross-origin frame]: https://blog.csdn.net/qq_44276328/article/details/101265024