仅在链接被点击时加载iframe [英] only load iframe when link is clicked

问题描述

如何一次显示一个iframe？所以我有一个索引网页在导航到iframe的链接，但我想要iframes只显示链接时点击？现在他们都显示。这是一个javascript解决方案？我是新的编码，所以如果这样，那么它可能只是更容易我不使用iframe，只设置不同的网页和目标id。

How can I display one iframe at a time? So I have an index webpage that has links in the nav to the iframes but I want the iframes to only display when the links are clicked? Right now they are both displaying.Is this a javascript solution? I am new to coding so if so then it might just be easier for me to not use iframes and just set up different pages and target an id.

以下是我的代码：
http：// jsfiddle.net/r2mmb/

HTML

 <header>
<div id="logo">
<img src="../../assets/images/logo.png" alt="">
</div>
<nav>
<ul>
<li><a href="iframetoursprices.html" target="toursprices">
    TOURS,PRICES &amp; STANDARD FLIGHTS</a></li>
<li><a href="#">MEET THE STAFF</a></li>
<li><a href="iframegallery.html" target="gallery">Gallery</a></li>
</ul>
</nav>
    </header>

 <div class="mainInfo">
<iframe src="iframetoursprices.html" name="toursprices"></iframe>
<iframe src="iframegallery.html" name="gallery"></iframe>
</div>

推荐答案

我建议的一种方法是先隐藏所有< iframe> 使用CSS的元素：

One approach I'd suggest is first hiding all the <iframe> elements with CSS:

iframe {
    display: none;
}

创建一个CSS规则，使用 / code>，以显示该元素：

And creating a CSS rule, using a class, to show that element:

iframe.inUse {
    display: block;
}

使用jQuery：

// binds a click handler to all 'a' elements with a 'target' attribute:
$('a[target]').click(function(){
    // creates a reference to the clicked-link:
    var clickedEl = this;

    // gets all 'iframe' elements in the document:
    $('iframe')
        // removes the 'inUse' class from all of them:
        .removeClass('inUse')
        // filters the collection of 'iframe' elements:
        .filter(function(){
            // we keep only the 'iframe' whose 'name' attribute
            // is equal to the 'name' attribute of the clicked 'a':
            return this.name === clickedEl.target;
        // and we add the 'inUse' class to that iframe element:
        }).addClass('inUse');
});

JS Fiddle demo 。

另一种方法是只有一个< iframe> 元素，用CSS隐藏：

An alternative is to have only one <iframe> element on the page, hide it with the CSS:

iframe {
    display: none;
}

将内容加载到单个< iframe> ; 使用以下jQuery：

And load the content into that single <iframe> with the following jQuery:

$('a[target]').click(function(e){
    // prevents the default click-behaviour of the link:
    e.preventDefault();

    // finds the 'iframe' element with the name of 'showContent':
    $('iframe[name="showContent"]')
        // sets its 'src' property equal to the 'href' property of the clicked link:
        .prop('src', this.href)
        // shows the 'iframe':
        .show();
});

JS Fiddle demo 。

一个迟到的编辑，使用纯JavaScript，根据有些过时的解释，jQuery不能使用： / p>

A belated edit, to use plain JavaScript, made upon the somewhat overdue explanation that jQuery cannot be used:

function contentToIframe () {
    // getting a reference to the 'iframe' element whose 'name' attribute
    // is equal to the clicked element's 'target' attribute, using CSS
    // notation available under document.querySelector() (which returns
    // only the first element that matches the selector):
    var iframe = document.querySelector('iframe[name="' + this.target + '"]'),
        // getting a reference to the current 'display' (inline) style of
        // the 'iframe' (found above):
        curDisplay = iframe.style.display;

    // setting the 'src' property of the 'iframe' equal to the 'href'
    // of the clicked link:
    iframe.src = this.href;

    // if the 'iframe' doesn't have a set 'display' style-property, or
    // it is not set to 'block':
    if (!curDisplay || curDisplay !== 'block') {
        // we set it to 'block' to make it visible:
        iframe.style.display = 'block';
    }
}

// getting all the 'a' elements in the document that also have a 'target'
// attribute:
var links = document.querySelectorAll('a[target]');

// iterating over those link elements:
for (var i = 0, len = links.length; i < len; i++) {
    // binding an event-handler to deal with the click event,
    // which executes the function:
    links[i].addEventListener('click', contentToIframe);
}

JS Fiddle demo 。

上述（仍然是纯JavaScript）方法的最终迭代现在还允许滚动在链接被点击以加载内容时< iframe> ：

Final iteration of the above (still plain JavaScript) approach which now also allows for scrolling to the <iframe> when the link is clicked to load content:

function contentToIframe() {
    var iframe = document.querySelector('iframe[name="' + this.target + '"]'),
        curDisplay = iframe.style.display,
        // getting a reference to the current position of the 'iframe' element:
        position = iframe.getBoundingClientRect();
    iframe.src = this.href;
    if (!curDisplay || curDisplay !== 'block') {
        iframe.style.display = 'block';
        // if the 'iframe' wasn't visible it's position would have been 0,0;
        // so once we've made it visible we re-get its new (now visible)
        // coordinates:
        position = iframe.getBoundingClientRect();
    }

    // force the window to scrollTo the current position (x,y) of the 'iframe':
    window.scrollTo(position.left, position.top);
}

var links = document.querySelectorAll('a[target]');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].addEventListener('click', contentToIframe);
}

JS Fiddle demo 。

参考文献：

• '普通'JavaScript：
  
  
  
  • document.querySelector（） 。
  
  
  • document.querySelectorAll（） 。
  
  
  • Element.getBoundingClientRect（） 。
  
  
  • EventTarget.addEventListener（） 。
  
  
  • Window.scrollTo（） 。
  
  
  • 'Plain' JavaScript:
    • document.querySelector().
    • document.querySelectorAll().
    • Element.getBoundingClientRect().
    • EventTarget.addEventListener().
    • Window.scrollTo().
    
    
    • addClass （） 。
    
    
    • Attribute-equals（ [attribute =value] ）selector 。
    
    
    • click（） 。
    
    
    • filter（） 。
    
    
    • Has-attribute（ [attribute] ）selector 。
    
    
    • prop（） 。
    
    
    • removeClass（） 。
    
    
    • show（） 。
    
    
    • addClass().
    • Attribute-equals ([attribute="value"]) selector.
    • click().
    • filter().
    • Has-attribute ([attribute]) selector.
    • prop().
    • removeClass().
    • show().

    这篇关于仅在链接被点击时加载iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！