Question

我试图弄清楚如何将自定义javascript函数应用于位于iframe中的下拉菜单元素。 Javascript会更改下拉列表的外观，并且对于父页面非常有用。它不适用于iframe中的元素。我在这个网站上搜索了一个答案，但不幸的是，这里给出的一些例子对我的页面没有用。要记住以下几点：

这两个页面都在域中
我无法直接将js放在iframe中加载的页面上（以下代码只是一个示例，我无法访问真实内容）
我正在使用此处找到的js库（我根据自己的需要对其进行了修改）http://www.marghoobsuleman.com/jquery-image-dropdown

这是将在iframe中加载的页面。我试图设置选择元素的样式：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Iframe</title>
</head>
<body>
  <label for="specialty">Specialty: </label>
  <select name="specialty" id="specialty" class="dropdown">
     <option value="calendar">Calendar</option>
     <option value="shopping_cart">Shopping Cart</option>
  </select>
</body>
</html>

这是我尝试调用js的父级：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Parent Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.dd.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) { 
   try {
      $("body select").msDropDown();
   } 
   catch(e) {
       alert(e.message);
   }
});
$('#frame').load( function(){
   try {
      $(this.contentDocument).find('select').msDropDown();
   }
   catch(e) {
      alert(e.message);
   }
});
</script>
</head>
<body>
   <label for="specialty">Specialty: </label>
   <select name="specialty" id="specialty" class="dropdown">
      <option value="calendar">Calendar</option>
      <option value="shopping_cart">Shopping Cart</option>
    </select>
    <iframe src="add.html" id="frame" name="frame"></iframe>
</body>
</html>

提前致谢

Answer 1

据我所知，这似乎不太可能。这可能是插件本身的一个问题，因为即使在iframe的DOM上执行函数，该函数也会在父节点的DOM上执行。

将自定义javascript函数应用于iframe元素

1 个答案: