微信号:ZTEdeveloper

介绍:中兴开发者社区是一站式云端产品研发社区,为开发者和项目提供项目管理、开源协作、代码托管、持续交付、资源服务、技术交流等服务.让开发更简单,让创新更便捷!

干货 | 基于Angular开发语言下 Iframe 父子页面交互

2018-04-13 17:50 周小辉

点击上方“中兴开发者社区”,关注我们

每天读一篇一线开发者原创好文

作者简介

周小辉是一名高级软件工程师,从事Java和Web程序开发,近期项目是基于Angular框架开发的web项目,今天他为大家带来项目开发中碰到的难点,该问题是Angular框架下实现动态加载架构的有效方案,希望对大家有所启发。


有这样一个需求,存在父子页面,子页面有个输入框,父页面有个提交按钮,点击提交按钮,触发子页面的输入框参数校验,如果校验失败,则显示提示信息。iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。这里主要描述重点是基于Angular开发语言的交互,因此以同域链接场景为例。

我们知道同域链接场景父页面调用子页面方法: 

FrameName.window.childMethod();

当获得子iframe窗口的window对象时就可以交互,子页面在基于传统的js框架,如jquery实现的话,会是下面这样

function childMethod(){

   var number=    $('#number').value();

   if(number=='' || number.length>10){

   alert('号码范围为1-10位数字');

   }

 }

   jquery是基于dom开发的,但是在angular下,我们不直接操作dom,我们一般定义一个ngModel绑定到页面上,通过ngModel来获取值,这时,实现就无从下手了,好在Angular1.0提供了api,而Angular2.0没有开放任何接口

  Angular1.0

index.html中实现childMethod

function childMethod(){

var controllerScope = $('html[ng-controller="MainCtrl"]').scope(); 

controllerScope.check();

}

//相应的controller实现一个check方法,并声明为rootscope方法就行了

app.controller('MainCtrl', function($scope, $rootScope) {


});

app.controller('ChildCtrl', function($scope, $rootScope) {

   $scope.number = '';

   $rootScope.check = function() {

      if(number=='' || number.length>10){

      alert('号码范围为1-10位数字');

   }

});


 Angular2.0

index.html中实现childMethod

function childMethod(){

var component =  window['child'];

component .check();

}


组件实现check方法

export class ChildComponent implements OnInit {

    number:string;

    constructor(public changedDetector: ChangeDetectorRef, public translate: TranslateService) {

        window['child'] = this;

    }

    check(){

      if(number=='' || number.length>10){

      alert('号码范围为1-10位数字');

  

      this.changedDetector.markForCheck();    //解决变量修改失效问题

      this.changedDetector.detectChanges();

     }  

    }

可以看到,我们在ChildCompent的构造方法中,给window扩展了一个child属性,然后在子页面的index.html可以通过这个属性访问到该组件,是一个比较讨巧的用法;但是这样直接使用会有问题,当我们在ChildComponent 组件的check方法中操作原生的js语法时不会有问题,但是当我们需要修改某个ngModel的值时,会发现失效了,原因是我们通过 window['child'].check()时,浏览器没有监听到事件变化,因而没有重新渲染ChildComponent,我的理解是一般事件都是监听鼠标触发的,此时没有产生鼠标事件,自然监听不到;解决方案就是手动通知组件重新渲染,代码就是ChangeDetectorRef提供的markForCheck,detectChanges方法


 
中兴开发者社区 更多文章 干货 | Nodejs异步编程详解 干货|正则表达式引擎实现 重磅推荐|ACRN 之InterruptWindow功能正确性形式化验证 干货 | Jenkins2.0 Pipeline框架(iPipeline)优化实践之路(二) 干货 | Jenkins2.0 Pipeline框架(iPipeline)优化实践之路(二)
猜您喜欢 11月编程语言排行榜:Python逆袭C#上升到第4 AI快速绘制2.5D冰淇淋车 白话讲解遗传算法 (Genetic Algorithm) Open软件开发小组征稿啦 火爆北上广的梦想者市集来华科啦,安天移动安全等你来面试!