將自定義javascript函數應用於iframe元素

Question

我試圖弄清楚如何將自定義javascript函數應用於位於iframe中的下拉菜單元素。 JavaScript會更改下拉菜單的外觀，並非常適合父頁面。 它不適用於iframe中的元素。 我在該網站上搜索了答案，但不幸的是，此處給出的一些示例不適用於我的頁面。 請記住以下幾點：

兩個頁面都在域中
我無法將js直接放在iframe中加載的頁面上（以下代碼僅是示例，我無法訪問真實的東西）
我正在使用此處找到的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>

提前致謝

Answer 1

據我所知，這似乎是不可能的。 插件本身可能存在問題，因為即使在iframe的DOM上執行該功能，該功能也會在父級的DOM上執行。

將自定義javascript函數應用於iframe元素

問題描述

1 個解決方案

解決方案1
0 2012-07-11 19:43:11

將自定義javascript函數應用於iframe元素

問題描述

1 個解決方案

解決方案1 0 2012-07-11 19:43:11

解決方案1
0 2012-07-11 19:43:11