如何讓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？

回答

相關問題