0

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

  1. 两个页面都在域中
  2. 我不能直接将js放在iframe中加载的页面上（下面的代码只是一个例子，真实的东西我无法访问）
  3. 我正在使用此处找到的 js 库（我对其进行了一些修改以满足我的需要）http://www.marghoobsuleman.com/jquery-image-dropdown

这是将在 iframe 中加载的页面。我正在尝试设置 select 元素的样式：

<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>

提前致谢

4

1 回答 1

0

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

于 2012-07-11T19:43:11.390 回答