将自定义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元素

回答

相关问题