如何让 jquery-ui 自动完成退出 iframe? [英] How make jquery-ui autocomplete get out iframe?
问题描述
是否可以将自动完成(jQueryUI)的建议从一个 iframe 中取出，并具有与select"元素相同的行为?我举一个例子:
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>
整个示例遗漏了与解释这一点无关的所有内容，因此它不起作用.根据需要添加并添加一些糖.
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 内部动态加载它们.
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
}
})
});
再次说明，可能有空缺，请随意填写相关代码
Once again, there may be voids, so fill up with relevant code at will
这篇关于如何让 jquery-ui 自动完成退出 iframe?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
