如何让jquery-ui自动完成取出iframe？

是否有可能使自动完成（jQueryUI）的建议离开一个iframe，具有“select”元素的相同行为？我做了一个例子：如何让jquery-ui自动完成取出iframe？

2012-10-27 user1779925

由于事实上，这是可以做到，虽然有些造型将是强制性的。 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>

整个例子是缺少explainig点不相关的所有的东西，所以它不是功能。根据需要添加适量并添加一些suggar。因为1）相对于输入位置的位置在父窗口上是不相关的，2）父母不需要加载jqueryui样式表，尽管你可以用类似的技术从iframe里面加载它们。

重要：

如果双方，父母和孩子都在同一个域中这只会工作[见：SOP]

UPDATE

完成这样做同样的事情后，我想出了此解决方案的造型和位置：

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-05 18:08:20

如何让jquery-ui自动完成取出iframe？

回答

相关问题