來電提示功能 - iframe和同源策略

警報火災，並顯示了和關閉，但綁定到按鈕的點擊是逃避我。

我有一個fancybox彈出窗口的作品。這是一個形式：

的HTML是一個簡單的表：

<form id="my-form" method="post" action=""> 
    <table> 
     <tr> 
      <td> 
       <label for="name">Name</label></td> 
       <input type="text" id="name" name="name"> 
      </td> 
      <td> 
       <input type="submit" value="Submit"> 
      </td> 
     </tr> 
    </table> 
</form>

的鏈接觸發的fancybox：

<a class="fancy-popup" href="test.html" data-fancybox-type="iframe">

我有一個簡單的腳本，調用一些功能：

$(document).ready(function() { 

    function before_show() { 
     alert("fancybox before show"); 
    } 

    function after_show() { 
     alert("fancybox after show"); 
    } 

    function on_close() { 
     alert("fancybox after close"); 
    } 

    function alert_me() { 
     $.fancybox.inner.find('iframe').contents().find('input.click-me').click(function() { 
      alert("fancybox has been foiled!!!"); 
     }); 
    } 

    $(".fancy-popup").fancybox({ 
     openSpeed  : 'slow', 
     openEffect : 'fade', 
     minWidth  : '200', 
     minHeight  : '100', 
     maxWidth  : '400', 
     maxHeight  : '150', 
     scrolling  : 'no', 
     beforeShow : before_show, 
     afterShow  : after_show, 
     afterClose : on_close, 
     //afterShow  : alert_me 
    }); 
});

我意識到我無法在iFrame中執行此操作，因爲有相同的原產地策略。我無法弄清楚我的生活如何得到這個工作。

注意

請注意，自成立以來的問題已經改變，所以下面參考驗證答案是不適用的。

來源

2013-01-03 nicorellius

您可以添加您的警報，也可以使用AJAX到您的窗體與'XHR '你甚至可以在你的fancybox中使用iframe（不推薦，但你可以）。你有沒有嘗試將你的代碼綁定到jquery的許多'form validator'插件？ –

我還沒有嘗試過嘗試過這些方法，因爲我希望能夠以這種方式工作。但現在看起來工作起來比我原先想象的更難，我可能會尋求其他方法。我很可能會去jQuery表單驗證器插件。謝謝。 – nicorellius

經過很多痛苦之後，我決定在不使用iFrame的情況下對其進行重做。我認爲iFrame是最好的方法，但後來意識到我錯了，至少在我目前的理解水平。然而，用這種方法，我可以成功地從彈出的fancybox打電話報警：

http://jsfiddle.net/nicorellius/d4KVs/

我想我在這裏可以使用現有的驗證了。

這裏是HTML，改變了：

<a href="#test" class="fancy-popup">fancy link</a>

我把HTML在一個地方，使用現有的fancybox技術引用它。

然而，我並沒有放棄。我一直在擺弄它，並找到了使用iFrame的解決方案。不知道到底我做什麼，但我設置了原來的計劃，以及所使用的腳本：

function alert_me() { 
     $.fancybox.inner.find('iframe').contents().find(
      'input.click-me').click(function() { 
       alert("fancybox has been foiled!!!"); 
     }); 
    }

現在的警告框內嵌框架內的fancybox彈出。

這個解決方案的事情是：它可能被限制在我所在的同一個域中，所以在生產中它可能不會工作。我跑了一個快速測試，它似乎跨域，但我有一種感覺，它會在未來給我帶來麻煩...

來源

2013-01-04 20:04:09 nicorellius

來電提示功能 - iframe和同源策略

回答

相關問題