Question

我怎样才能实现一个事件函数，它会触发<iframe>文档元素的click事件。

我必须采取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>

Answer 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();

对文档的iframe元素的操作会触发事件事件

1 个答案: