Question

我相信我一定会遗漏一些简单的事情。

我有一个页面上有3个按钮，名为showHome，showRecords，showFinance，我还有3个div，名为divHome，divRecords，divFinance，在每个div中我有3个名为iframeHome，iframeRecords，iframeFinance的iframe。 / p>

此处的目标是在页面呈现后加载第一个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.
});

这假设您的iframe开始：

<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中，因此无论如何都会将这些访问记录到您的网络统计信息中

至于show / hide：

<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>

jquery仅在第一个按钮单击时将内容加载到iframe中

2 个答案: