Javascript 仅在单击链接时加载iframe

如何一次显示一个iframe？因此，我有一个索引网页，在导航中有指向iFrame的链接，但我希望iFrame仅在单击链接时显示？现在它们都在显示。这是javascript解决方案吗？我对编码还不熟悉，所以如果是这样的话，我可能更容易不使用iframe，而只是设置不同的页面和目标id

这是我的密码：

HTML

您可以尝试将类

.active

添加到您组合的iframe中

并将onclick事件添加到菜单中

看看这个例子

---

我建议的一种方法是首先用CSS隐藏所有

元素：

iframe {
    display: none;
}

并使用

类创建CSS规则来显示该元素：

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');
});


另一种方法是在页面上只有一个
元素，使用CSS隐藏它：

iframe {
    display: none;
}

并使用以下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();
});


一个迟到的编辑，使用纯JavaScript，是在有点过期的解释jQuery不能使用后做出的：

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);
}

函数contentToIframe（）{
//获取对具有“name”属性的“iframe”元素的引用
//等于使用CSS单击的元素的“target”属性
//document.querySelector（）下可用的符号（返回
//仅与选择器匹配的第一个元素）：
var iframe=document.querySelector（'iframe[name=“”+this.target+”），
//获取对当前“显示”（内联）样式的引用
//“iframe”（见上文）：
curDisplay=iframe.style.display；
//将“iframe”的“src”属性设置为“href”
//单击的链接的名称：
iframe.src=this.href；
//如果“iframe”没有设置“display”样式属性，或者
//未将其设置为“块”：
如果（！curDisplay | | curDisplay！=='block'）{
//我们将其设置为“块”以使其可见：
iframe.style.display='block'；
}
}
//获取文档中同时具有“目标”的所有“a”元素
//属性：
var links=document.querySelectorAll（'a[target]'）；
//迭代这些链接元素：
对于（变量i=0，len=links.length；i


上述（仍然是纯JavaScript）方法的最后一次迭代，现在还允许在单击链接加载内容时滚动到
：

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);
}

函数contentToIframe（）{
var iframe=document.querySelector（'iframe[name=“”+this.target+”），
curDisplay=iframe.style.display，
//获取对“iframe”元素当前位置的引用：
position=iframe.getBoundingClientRect（）；
iframe.src=this.href；
如果（！curDisplay | | curDisplay！=='block'）{
iframe.style.display='block'；
//如果“iframe”不可见，其位置将为0,0；
//因此，一旦我们使其可见，我们将重新获得新的（现在可见）
//坐标：
position=iframe.getBoundingClientRect（）；
}
//强制窗口滚动到“iframe”的当前位置（x，y）：
window.scrollTo（position.left，position.top）；
}
var links=document.querySelectorAll（'a[target]'）；
对于（变量i=0，len=links.length；i


参考资料：


“普通”JavaScript：







jQuery（在OP决定分享他无法使用jQuery之前使用）










这是jquery还是javascript？对不起，我知道的不多，所以说不出来。在我的作业中，我不允许只使用jquery javascript:/jquery是javascript，它只是一个库，可以抽象出本地javascript的一些复杂性，以便跨浏览器使用。然而，这个答案确实依赖于jQuery，是的。我在最近的一次编辑中试图解释代码，解释它在做什么。等等：你不能使用jQuery吗？我能问你为什么在你的问题中使用了，而没有提到它不能被使用的事实吗？问题的标记应该显示正在使用或可能使用的语言，而不是您无法使用的语言。您为什么不使用一个iframe，然后使用带有target属性的链接将一个或另一个页面加载到该页面中…？您实际想要的是：（a）仅加载一个或（B）只显示一个？@CBroe嗨，是的，可以工作，只是从没想过。你能用小提琴演示一下吗？我想在一个iframe中一次显示一页，当点击链接时会显示出来。不，我不会“演示”最琐碎的东西…
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);
}