0

我如何实现一个事件函数，该函数会触发来自<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>

4

1 回答 1

0

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

如有必要，您可以让其他视图（例如父视图）从您的 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();
于 2015-10-15T17:46:05.713 回答