如何让jQuery的的UI自动完成全身而退IFRAME？ [英] How make jquery-ui autocomplete get out iframe?
问题描述
时有可能使自动完成（jQueryUI的）走出一个iframe的建议，具有选择元素相同的行为？我做了一个例子：
Is it possible to make the suggestions of autocomplete (jQueryUI) get out one iframe, having the same behaviour of "select" element? I make one example:
推荐答案
由于事实上，这是可以做到，虽然有些造型将是强制性的。 jQueryUI的接受附加的选项的元素，你可以通过父窗口作为元素。举个例子：
As a matter of fact, it can be done, though some styling will be mandatory. jQueryUI accepts an element to append the options to, and you can pass the parent window as that element. An example:
主窗口：
<html>
<head></head>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
Iframe.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>
整个示例缺少explainig点不相关的所有的东西，所以它不是功能。根据需要Addapt，并添加一些suggar。
The whole example is missing all things not relevant to explainig the point, so it's not functional. Addapt as needed and add some suggar.
对于造型我是前闯民宅，你将不得不放弃元素的位置和风格，因为1）相对于输入位置位置在父窗口无关; 2）母公司不需要加载了jQueryUI的样式表，虽然你可以从iframe中加载dinamically与他们类似的技术。
As for the styling i was refering before, you will have to give elements a position and style, as 1) position relative to input position is irrelevant on parent window and 2) parent doesn't need to have jqueryui stylesheets loaded, although you can load them dinamically from inside the iframe with a similar technique.
重要提示：
这如果双方，父母和孩子都在同一个域中才起作用[见： SOP ]
This will only work if both, parent and child are in the same domain [see: SOP]
更新
完成这样做同样的事情后，我想出了这个解决方案的造型和位置：
After finishing doing this same thing, i came up with this solution for styling and position:
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
}
})
});
再一次，可能会有空隙，所以将与相关code填写
Once again, there may be voids, so fill up with relevant code at will
这篇关于如何让jQuery的的UI自动完成全身而退IFRAME？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
