0

私はこれについて簡単な何かを見逃しているに違いないと確信しています。

showHome、showRecords、showFinanceという名前の3つのボタンがあるページがあります。また、divHome、divRecords、divFinanceという名前の3つのdivがあり、これらの各div内にiframeHome、iframeRecords、iframeFinanceという名前の3つのiframeがあります。

ここでの目標は、ページがレンダリングされた後に最初のiframeを読み込むことです。次に、ユーザーが次のボタンをクリックすると、次のiframeのソースが動的に設定され、ユーザーが外部コンテンツを表示できるようにdivが表示されます。私のドメインですが、どこか別の場所です。もちろん、3番目のボタンクリックでも同じです。iframeにロードするURLが渡され、divが表示されます。これで、ユーザーが他のボタンの1つをクリックすると、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 にsrcnot equal toがあるかどうかを確認してみません'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 にロードしているため、これらの訪問は Web 統計に記録されます。

表示/非表示について:

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

リンクの 1 つ (ページ 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 に答える