如何設置iframe的src到同一頁面（使用不同的錨點）

我有一個演示頁面。在那個頁面是一個文本框和一個iframe。當文本框中的值發生變化時，應將iframe更新爲基於該值的新url（實際上，該文本框是隱藏的，並且基於更復雜的查找進行更改，但與此問題無關）。該代碼應該是相當直接：如何設置iframe的src到同一頁面（使用不同的錨點）

$(document).ready(function(){ 
    $(".id-textbox").change(function(){ 
    var entryId=$(".id-textbox").val(); 
    var srcTxt='http://[site]/#id=' + entryId; 
    var iframe = $('.webaccess-iframe iframe'); 
    iframe.attr('src',srcTxt); 
    }); 
});

的問題是URL，並且它看起來像一個事實： http://[site]/#id={some id} 如果訪問該網頁，指定一個ID，它實際上將打通頁面指向的文件與您指定的ID - 我無法控制，這就是您如何使用該網站，我沒有寫。

如果您第一次在文本框中輸入了有效的ID，則會設置iframe的src，頁面加載正確，並且一切都很好。但是，如果您輸入了另一個有效的id，iframe的src被設置爲新的url，然後什麼都不會發生，因爲瀏覽器（至少在Firefox中）仍然認爲它指向相同的url。畢竟，它在技術上是相同的網址 - 這不是瀏覽器的錯誤，我們試圖訪問的網站使用錨點。

我試着給它的網址，然後刷新iframe（與contentDocument.location.reload（）），但似乎並沒有改變行爲。我也試過給它：空白，然後url。這只是一半的工作時間：當你鍵入有效的ID，它加載你的頁面，然後它加載約：空白而不是下一頁，然後它正確加載一個頁面，然後加載約：空白，而不是，等等

有什麼辦法強制iframe實際加載新的url？

來源

2013-12-20 neminem

你可以嘗試'var srcTxt ='http：// [site] /＃'+ entryId;'？請注意'＃smth'的語法與GET請求'？id = smth'的語法不同。如果它不起作用，你也可以嘗試'var srcTxt ='＃'+ entryId;'。 –

它真的是一個新的網址嗎？服務器是否實際讀取散列並根據它輸出不同的內容？我認爲散列只能在客戶端看到。 –

向URL添加無意義的查詢字符串不應該有任何傷害;這將使iFrame認爲它是新的並重新加載它。例如，像'var srcTxt ='http：// [site] /？myCrazyQuerystring ='+ new Date（）。getTime（）+'＃id ='+ entryId;'。服務器應該忽略查詢字符串，因爲它沒有期待它。 –

作爲一個有點哈克解決方法，一個iFrame將視更改查詢字符串作爲一個新的URL - 但大多數服務器會忽略他們沒想到查詢字符串。所以作爲一個修復，你可以添加一個每次都會改變的無意義的查詢字符串（比如說一個日期戳）。

例如：

var srcTxt='http://[site]/?myCrazyQuerystring=' + new Date().getTime() + '#id=' + entryId;

來源

2013-12-20 21:01:25

注意潛在的未來讀者：雖然我同意它有點不好，但這也很容易實現，並且100％努力解決特定問題。不一定是正確的一種聰明，但聰明。 ;） – neminem

http://[site]/#{some id}

沒有id=

來源

2013-12-20 20:34:21 Meehow

我不確定你的想法會達到什麼效果 - 這完全不一樣...... – neminem

如果您在URL中使用了'#id = something'，那麼這意味着您必須擁有'id =「id = something」'在網站上。確實不一樣，但看起來這可能是你的問題。 – Meehow

這種行爲似乎是專門針對Firefox瀏覽器。一個錯誤，也許？

注意，如果在iframe頁面是同一個域中的容器頁面，你可以做（純JavaScript）

iframe.contentDocument.location.replace(srcTxt);

如果在iframe指向一個網頁上這樣可不行一個不同的域，因爲contentDocument不會被JavaScript讀取。

來源

2015-04-01 00:35:38

如何設置iframe的src到同一頁面（使用不同的錨點）

回答

相關問題