如何检查 iframe 中的选择下拉菜单是否更改？

Question

我在 iframe 中有一个选择下拉菜单，但如果更改，我想从 iframe 中检查它。 我是这样写的，可惜没用。

$(document).ready(function () {

    // var iframe = $("#spin-frame");
    // var result = iframe.contents().find("#result-select");

    var result;

    $("#spin-frame").bind("load",function(){
        result = $(this).contents().find("#result-select");
    });

    result.live('change', function() {
        // TODO 
    });

});

Answer 1

由于iframe 的内容与父页面位于同一域中，因此您可以将事件处理程序直接附加到您使用contents() 检索的#result-select 元素：

jQuery(function($) {
  $("#spin-frame").bind("load",function(){
    result = $(this).contents().find("#result-select").on('change', function() {
      let value = $(this).val();
      console.log(value);

      // work with the selected value here..
    });
  });
});

另请注意，live() 很久以前就已从 jQuery 中弃用，不应使用。此外，请检查您正在使用的 jQuery 版本，因为它可能已过时。在撰写本文时，最新的公开版本是 3.5.0。