0

iframeにあるドロップダウンメニュー要素にカスタムJavaScript関数を適用する方法を理解しようとしています。Javascriptはドロップダウンのルックアンドフィールを変更し、親ページに最適です。iframe内の要素では機能しません。私はこのウェブサイトで答えを探しましたが、残念ながら、ここに示されている例のいくつかは私のページでは機能しませんでした。覚えておくべきいくつかのこと：

  1. 両方のページがドメインにあります
  2. iframeに読み込まれているページにjsを直接配置することはできません（以下のコードは単なる例であり、本物にはアクセスできません）
  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 に答える