jQuery的內容加載到iframe中只有第一個按鈕點擊

Question

我相信我一定是失去了一些東西就這麼簡單。我有一個名爲showHome，showRecords，showFinance的名爲showHome，showRecords，showFinance的3個頁面，我也有3個div命名爲divHome，divRecords，divFinance，並在每個div中我有3個iframe，分別命名爲iframeHome，iframeRecords，iframeFinance。

這裏的目標是在頁面渲染後加載第一個iframe，然後當用戶單擊下一個按鈕時，下一個iframe將動態設置其源代碼，然後顯示div以便用戶可以看到外部內容，仍然在我的域名上，但在其他地方。當然，第三個按鈕點擊也是一樣，iframe傳遞一個url來加載，然後顯示div。現在，當用戶點擊其他按鈕之一時，div應該顯示或隱藏，沒有理由重新加載內容。

所以我需要跟蹤哪個被點擊按鈕，這樣，如果有一個1，將只顯示或隱藏DIV，否則iframe的需要進行設置。我有一個版本的工作，不是很優雅的，所以我試圖用更少的代碼編寫這一點，這裏是我有什麼不工作，我知道爲什麼，但我不知道如何解決它。

我現在的劇本是這樣的

var showHome_clicked = '1'; 
var showDataMart_clicked = '0'; 
var showFinance_clicked = '0'; 
var showCost_clicked = '0'; 
var showSchedule_clicked = '0'; 
var showPerformance_clicked = '0'; 
var showWinsight_clicked = '0'; 
var pageToLoad = "http://sp2010/dashboard/0045/default.aspx"; 

function showRequestedContent(){ 
    var displayedDiv = $('div.contentDiv').filter(function(){ 
     if($(this).css('display') != 'none'){ 
      alert(buttonClicked); 
      $('.contentDiv:visible').fadeOut("fast"); 
      $("#div" + ($(this).index()+1)).show().fadeIn("slow"); 
     } 
    }); 
} 


$("input").click(function(e) 
{ 
    var buttonClicked = (e.target.id + '_clicked'); 
    var targetIframe = (e.target.id).replace("show", "iframe"); 
/* Here I need to check the variable that i created, but it contains the name of my manipulated value not the 1 or 0 I need to check for, not sure how to do this? */ 
    if(buttonClicked == '0'){ 
     $(targetIframe).attr('src', pageToLoad + '?isdlg=1'); 
      buttonClicked = '1'; 
      alert("zero"); 
      showRequestedContent; 
    } 
    else if(buttonClicked == '1'){ 
     showRequestedContent; 
     alert("one"); 
    } 

}); 

-------------更新了這個現在正在---------------

var buttonClicked = 'showHome'; 
var currentDiv = 'divHome'; 

$('.switchIframe').click(function(e){ 
    e.preventDefault(); 
    if (e.target.id != buttonClicked){ 
     targetDiv = (e.target.id).replace("show", "div"); 
     var $targetIframe = $($(this).data('target')), 
     src = $(this).data('src'); 
     if($targetIframe.attr('src') != src){ 
      $targetIframe.attr('src', src); 
     } 

     showDiv(targetDiv); 
     hideDiv(currentDiv); 
     currentDiv = targetDiv; 
     buttonClicked = e.target.id; 
    } 

}); 

function showDiv(id) { 
    var $sDiv = $('#' + id); 
    $sDiv.show(500); 
} 

function hideDiv(id) { 
    var $hDiv = $('#' + id); 
    $hDiv.hide(200); 
} 

$(document).ready(function(){ 
    $('#divHome').show(); 
}); 

Answer 1

爲什麼不檢查IFRAME有一個src不等於'about:blank'？

$('input').click(function(e){ 
// your code for targetIframe 

    var currentSrc = $(targetIframe).attr('src'); 
    if(currentSrc == "about:blank"){ 
    $(targetIframe).attr('src', pageToLoad); 
    } 
    showRequestedContent(); // <-- In your code you forgot the parenthesis. 
}); 

這假定您的I幀開始了：

<iframe src="about:blank" id="yourID"></iframe> 

編輯：

，以存儲和DOM節點是使用data-*屬性檢索值的最簡單方法。

例如：

<button class="switchIframe" data-target="#iframe1" data-src="http://youtube.com">Show iframe 1</button> 
<iframe src="about:blank" id="iframe1"></iframe> 

那麼你的jQuery看起來是這樣的：

$('.switchIframe').click(function(e){ 
    e.preventDefault(); 
    var $targetIframe = $($(this).data('target')), 
     src = $(this).data('src'); 

    // if it's not the same source, load it. 
    if($targetIframe.attr('src') != src){ 
    $targetIframe.attr('src', src); 
    } 

    showRequestedContent(); 
}); 

Answer 2

爲什麼你需要jQuery的是什麼？

<a href="/pages/page1.htm" target="content">Page 1</a> 
| <a href="/pages/page2.htm" target="content">Page 2</a> 
| <a href="/pages/page3.htm" target="content">Page 3</a> 
| <a href="#" id="end">End</a> 

<iframe id="frame1" name="content" src="/pages/page1.htm"/> 

由於要裝載這些頁面進入的iframe，這些訪問將被記錄到你的網站統計反正

至於顯示/隱藏：

<script type="text/javascript"> 
$('#end').on('click',function(){ 
    $('#frame1').hide(); 
}); 
</script> 

如果你想顯示幀再次隱藏，通過點擊鏈接（第1頁第2頁等）之一後，然後把你的鏈接到一個UL元素，並添加功能，你想讓它該列表內，例如工作列表項

<ul id="links"> 
    <li><a class="link" href="/pages/page1.htm" target="content">Page 1</a></li> 
    <li><a class="link" href="/pages/page2.htm" target="content">Page 2</a></li> 
    <li><a class="link" href="/pages/page3.htm" target="content">Page 3</a></li> 
    <li><a href="#" id="end">End</a></li> 
</ul> 

<script type="text/javascript"> 
$('#links a.link').on('click',function() { 
    if (!$('#frame1').is(":visible")) $('#frame1').show(); 
}); 
</script>