对 document 的 iframe 元素的操作触发事件事件答案

【问题标题】：Action on document 's iframe's elements trigger event event对 document 的 iframe 元素的操作触发事件事件
【发布时间】：2015-10-16 01:46:05
【问题描述】：

如何实现一个事件函数，该函数会触发来自<iframe> 文档元素的点击事件。

我必须对document.getElementById("iframe-id").contentWindow.window.document.getElementById("hello-abc")采取行动。

是否可以使用 Backbone.View() 来实现？？

<!-- Sample example -->
<html>
<head></head>
<!-- parent #document -->
<body>
  <div class="height-inherit">
    <div id="pdf-overlay" class="modal fade in" data-replace="true" aria-hidden="false" data-keyboard="false" style="overflow-y: hidden !important; display: block;">
      <div class="modal-dialog">
        <div class="modal-body">

              <!-- this id =pdf could access from parent document-->
              <iframe id="pdf" width="100%" scrolling="no" tabindex="0" vspace="0" class="" allowtransparency="true" aria-hidden="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" height="621" src="/static/lib/pdfjs/web/viewer.html?file=/static/app/abc.pdf">
                  <!-- child #document -->
                <html>
                  <head></head>
                  <body>
                    <div>
                    <!-- I have to impelemt in parent view(.js) on listen from child window document  element tiggered event -->
                    <button id="hello-abc" data-l10n-id="error_close" style="margin-top:5px;">Close</button>

                    </div>
                  </body>                
                </html>
              </iframe>
              
        </div>
    </div>
  </div>
  </div>
</body>
</html>

【问题讨论】：

标签： jquery iframe backbone.js pdf.js

【解决方案1】：

您可以将视图的 el 指向 iframe body 并像任何其他主干视图一样为其元素定义事件。

如有必要，您可以让其他视图（例如父视图）从您的 iframe 视图中监听事件。

类似：

var TestView = Backbone.View.extend({
 el: $('iframe').get(0).contentWindow.document.body,
 initialize: function() {
   this.render();
 },
 events: {
  'click button': 'eventHandler'
 },
 render: function() {
  this.$el.append($('#iframe-template').html());
 },
 eventHandler: function(e, rivetsView) {
  alert('bingo!');
  //triger a custom event for the parent view or such if required
 }
});
var test = new TestView();

【讨论】：