如何检测JavaScript postMessage源iframe的ID？

如何解决如何检测JavaScript postMessage源iframe的ID？

我有此代码：

 1  def print_range(start,end):
 2    n = start
 3    while n <= end:
 4      print(n)
 5      n+=1
 6  print_range(1,5)  # Should print 1 2 3 4 5 (each number on its own line)

  import {useEffect,useState } from "react"

 const SearchByName = () => {
     const [recipes,setRecipes] = useState({
        recipesObj: {},loding: false,});

 useEffect(()=>{
       // useEffect can access fetchData anytime
      fetchData()
 },[])

  const fetchData = async () => {
    try {
      setRecipes({ loading: true });

      const res = await axios.get(`url_to_API`);

      console.log(res.data) // prints returned object from API

      setRecipes({ recipesObj: res.data,loading: false });

      console.log(recipes.recipesObj);

    } catch (err) {
       console.error(err);
    }
  };
};

检测消息发件人iframe的<iframe src="..." id="iframe_01"></iframe> <iframe src="..." id="iframe_02"></iframe> 的最佳方法是什么？

解决方法

两个想法：

1. 您可能可以通过将消息source与contentWindow元素的iframe属性（例如，循环）进行比较来获取它。您想在所有目标浏览器上进行尝试，以确保event.source === iframe.contentWindow可以识别iframe。

2. 您可以将iframe明确地包含在消息中。 iframe的窗口应该可以通过frameElement属性访问它嵌入的iframe元素，因此从理论上讲，至少对于相同来源的窗口，frameElement.id可以iframe该ID。

如果上述两种方法都不起作用，则可以使用postMessage告诉iframe传回什么ID，或者将该ID包含在iframe的URL查询字符串中因此iframe可以从location.search获取它。