gpt4 book ai didi

jquery-ui - 如何让 jquery-ui 自动完成退出 iframe?

转载 作者:行者123 更新时间:2023-12-02 09:13:06 26 4
gpt4 key购买 nike

是否可以使自动完成(jQueryUI)的建议从一个 iframe 中出来,具有与“select”元素相同的行为?我举一个例子:

http://jsbin.com/ehidef/1

最佳答案

事实上,这是可以做到的,尽管一些样式是强制性的。 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>

整个示例缺少与解释要点无关的所有内容,因此它不起作用。根据需要进行调整并添加一些糖。

至于我之前提到的样式,您必须为元素提供位置和样式,因为 1) 相对于输入位置的位置与父窗口无关,2) 父窗口不需要加载 jqueryui 样式表,尽管您可以使用类似的技术从 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
}
})

});

再次强调,可能会有空缺,随意填写相关代码

关于jquery-ui - 如何让 jquery-ui 自动完成退出 iframe?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13104073/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com