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

我想弄清楚如何將自定義javascript函數應用於位於iframe中的下拉菜單元素。 Javascript改變了下拉的外觀和感覺，並且非常適合父頁面。它不適用於iframe中的元素。我搜索了這個網站的答案，但不幸的是這裏給出的一些例子並不適合我的網頁。幾件事情要記住：將自定義javascript函數應用於iframe元素

兩個網頁域中
我不能直接將其放置在iframe中加載（頁面上的JS下面的代碼只是一個例子，真實的東西是不是
我用在這裏發現了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>

在此先感謝

來源

2012-07-11 Sergey Zasukha

至於我可以告訴大家，這似乎不可能。這可能是插件本身的問題，因爲即使在iframe的DOM上執行該函數，該函數也會在父代的DOM上執行。

來源

2012-07-11 19:43:11 Daedalus

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

回答

相關問題