优雅的处理单页多框架（）窗口管理同步问题</p> <h4>消息数据结构</h4> <pre><code>{ event: '事件名称', type: 'child', target: '内嵌页的window', data: '传递的数据，即FrameController.broadcast(event, data)的data', frameId: '内嵌页标志' } </code></pre> <h4>使用说明</h4> <p>1、点击发送通知，所有打开的内嵌页都会受到通知。</p> <p><img alt="" src="/static/assets/osapp/images/e37c09c4bead5909836dcee24f7be0c6.gif" /></p> <pre><code>var addLog = function(from, event, data) { var _old = $('#log').html().substring(0, 3000); $('#log').html( (logTpl + _old) .replace('#EVENT#', event) .replace('#DATA#', JSON.stringify(data)) .replace('#SOURCE#', from) ); console.log('event：', event, 'data:', data); }; //同步通知 FrameController.addListener('broadcast', function(e) { $('#msg').val(e.data.msg); addLog(e.frameId, e.event, e.data); }); //发送广播 $('#send').click(function() { var nums = FrameController.broadcast('broadcast', { msg: $('#msg').val() }); $('#log').html('通知成功:' + nums + '\n\n' + $('#log').html()); }); //更新输入状态 $('#msg').change(function() { FrameController.broadcast('change', { text: '输入框内容已更改:' + $(this).val() }); }); //更新状态 FrameController.addListener('change', function(e) { addLog(e.frameId, e.event, e.data); }); </code></pre> <p>2、新增<br /> 内嵌页，关闭内嵌页，可以通过：FrameController.addListener(‘frame.add’,func)、FrameController.addListener(‘frame.remove’,func)<br /> 进行监听</p> <p><img alt="" src="/static/assets/osapp/images/02666c0ce692fdda85c7326985cbac1c.gif" /></p> <pre><code>//监听系统事件 var addLog = function(from, event, data) { var _old = $('#log').html().substring(0, 3000); $('#log').html( (logTpl + _old) .replace('#EVENT#', event) .replace('#DATA#', JSON.stringify(data)) .replace('#SOURCE#', from) ); console.log('event：', event, 'data:', data); }; //监听系统事件 FrameController.addListener('frame.remove', function(e) { addLog(e.frameId, e.event, e.data); }); FrameController.addListener('frame.add', function(e) { addLog(e.frameId, e.event, e.data); }); </code></pre> <p>3、可以对一个事件增加多个监听方法，可以删除所有监听方法、删除某一个监听方法</p> <p><img alt="" src="/static/assets/osapp/images/365429ed5e0a570c30b360f4d6cd1a3d.gif" /></p> <pre><code>var logTpl = '事件:#EVENT# 来源:#SOURCE#\n数据:#DATA#\n\n', addLog = function(from, event, data) { var _old = $('#log').html().substring(0, 3000); $('#log').html( (logTpl + _old) .replace('#EVENT#', event) .replace('#DATA#', JSON.stringify(data)) .replace('#SOURCE#', from) ); console.log('event：', event, 'data:', data); }, msgEventListener = function(e) { $('#log').html('自定义事件已经触发，添加多次会触发多次\n\n' + $('#log').html()); }; //添加自定义事件 $('#add_custom').click(function() { FrameController.addListener('broadcast', msgEventListener); }); //删除自定义事件 $('#remove_custom').click(function() { FrameController.removeListener('broadcast', msgEventListener); }); </code></pre> <p>更多说明请访问：<a href="http://www.miaoqiyuan.cn/p/framecontroller-js">http://www.miaoqiyuan.cn/p/framecontroller-js</a></p> </p> </div> <hr> <div class="text-center"> <a type="button" class="btn btn-primary" href="https://gitee.com/mqycn/FrameController.js" rel="nofollow" target="_blank">软件首页</a> </div> </section> </div> <div class="col-md-4"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5812992211126268" crossorigin="anonymous"></script> <!-- 开源 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5812992211126268" data-ad-slot="7280163337" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <hr> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5812992211126268" crossorigin="anonymous"></script> <!-- 开源 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5812992211126268" data-ad-slot="7280163337" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <footer class="es-footer"> <div class="copyright"> <div class="container"> Powered by <a href="http://www.codingdict.com/" target="_blank">CodingDict</a> ©2014-2020 <a class="mlm" href="http://www.codingdict.com/" target="_blank">编程字典</a> <a class="mlm" href="http://www.codingdict.com/courses">课程存档</a> <div class="mts"> 课程内容版权均归 <a href="http://www.codingdict.com/"> CodingDict </a> 所有 <a class="mlm" href="https://beian.miit.gov.cn/" target="_blank"> 京ICP备18030172号 </a> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?30b336128641baa43b1404dd15891277"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id: "JpzbFo2d3IEdIRuU",ck: "JpzbFo2d3IEdIRuU"})</script> </footer> </div> </body> </html>
