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

Posted 2023-05-09

【中文标题】如何检查 iframe 中的选择下拉菜单是不是更改？

【英文标题】：How can I check if a select dropdown in iframe changed?如何检查 iframe 中的选择下拉菜单是否更改？

【发布时间】：2020-08-11 00:53:10

【问题描述】：

我在 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 
    );

);

【问题讨论】：

iframe 是从与网页相同的域加载的吗？

@Turnip 是的，它来自同一个域

另外，.live() 在 jQuery 1.9 中被移除。你应该使用.on()

【参考方案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。

【讨论】：

谢谢Rory，但是当我们直接点击Select时就可以了，问题是在iframe中也被js改变了select值。

我们不会直接改变 Select 的值

select 以编程方式更改时不会引发任何事件。在这种情况下，您唯一的选择是在设置val() 后使用trigger('change') 手动引发事件，或者使用MutationObserver