0

我敢肯定我一定错过了一些简单的东西。

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

这里的目标是在页面呈现后加载第一个 iframe，然后当用户单击下一个按钮时，下一个 iframe 将动态设置其源，然后将显示 div，以便用户可以看到外部内容，仍然在我的域，但只是在其他地方。当然，在第 3 次按钮单击时也是如此，将 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();   
});
4

2 回答 2

2

为什么不检查 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();
});
于 2013-03-16T14:22:21.560 回答
0

为什么你需要 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>
于 2013-03-16T14:40:49.497 回答