オートコンプリート (jQueryUI) の提案を 1 つの iframe から取り出し、「select」要素と同じ動作をさせることは可能ですか? 私は一例を作ります:
質問する
2924 次
1 に答える
2
実際のところ、スタイリングは必須ですが、それは可能です。jQueryUI はオプションを追加する要素を受け入れ、親ウィンドウをその要素として渡すことができます。例:
メインウィンドウ:
<html>
<head></head>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe.html
<html>
<head>
<!-- include jQuery and jQuery UI and the like -->
<script type="text/javascript">
jQuery(function($){
// This will take parent frame if in iframe, own body elsehow
var el=top.document.body
// Instructs jQuery UI to show things on that previous element
$('input').autocomplete({appendTo:el});
});
</script>
</head>
<body>
<input type="text"/>
</body>
</html>
例全体には、要点を説明するのに関係のないものがすべて欠けているため、機能していません。必要に応じて追加し、砂糖を追加します。
前に参照していたスタイリングに関しては、要素に位置とスタイルを指定する必要があります.同様の手法を使用して、iframe 内から動的にロードします。
重要:
これは、親と子の両方が同じドメインにある場合にのみ機能します [参照: SOP ]
アップデート
これと同じことをやり終えた後、私はスタイリングと位置のためのこの解決策を思いつきました:
var files=[ // UI styles to be loaded on top frame
"css/ui-lightness/jquery-ui-1.10.3.custom.css",
"css/ui-lightness/custom.css"
]
// Create link tag and append to top frame head
for (var a in files) {
var style=$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: files[a]
});
$(top.document).find('head').append(style);
}
// As it turns out i had many iframes, so this will get the right one
var parentIframe=$(el).find('iframe').filter(function(){
return window.frameElement==this
});
$('input').each(function(){ // Cicle inputs to use with ui autocomplete
// set position to left + input offset 2 is a fix for borders on input
var pos= "left+"+($(this).offset().left+2)+
// and to top + input position + height to have it on the bottom
" top+"+($(this).offset().top+$(this).outerHeight()+1);
// Autocomplete
$(this).autocomplete({
appendTo:top.document.body, // put it on top window's body
position:{
at: pos, // at calculated position
of:parentIframe // from parent iframe
}
})
});
繰り返しになりますが、空白がある可能性があるため、関連するコードを自由に入力してください
于 2013-12-05T18:08:20.587 に答える