在引导选项卡上单击 iframe 内的更改内容
Posted
技术标签:
【中文标题】在引导选项卡上单击 iframe 内的更改内容【英文标题】：On bootstrap tab click change content inside iframe 【发布时间】：2017-05-04 00:06:29 【问题描述】：我有一个 index.html 文件，其中有引导选项卡的标题和带有选项卡内容的 iframe。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<script>
function switchTabInIframe(tab)
var tabId = $('#iframe_1').contents().find('#1');
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
;
</script>
<div id="exTab2" class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab" onclick="switchTabInIframe('1')" ;>1</a>
</li>
<li>
<a href="#2" data-toggle="tab" onclick="switchTabInIframe('1')">2</a>
</li>
<li>
<a href="#3" data-toggle="tab" onclick="switchTabInIframe('1')">3</a>
</li>
</ul>
<iframe src="iframe.html" frameborder="0" name="iframe_1"></iframe>
</div>
</body>
</html>
在 iframe.html 下方，我有标签的内容（正文）：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="tab-content">
<div class="tab-pane active" id="1">
<h3>tab1</h3>
</div>
<div class="tab-pane" id="2">
<h3>tab2</h3>
</div>
<div class="tab-pane" id="3">
<h3>tab3</h3>
</div>
</div>
</body>
</html>
单击索引文件中的选项卡时，如何更改 iframe 中的内容？上面的代码不起作用...控制台没有错误... Thx
【问题讨论】：
你能编辑/修改 ifram.html 吗？ 【参考方案1】：您需要创建并调用 iframe 页面中的函数。您的索引页面中的范围与 iframe 不同，用于切换选项卡。我建议这个更新..
在索引页面中，创建一个名为 switchframe(id) 的新函数并从您的 onclick 调用它
function switchframe(id)
document.getElementsByName('iframe_1').contentWindow.switchTabInIframe(id);
在 iframe.html 中
function switchTabInIframe(tab)
console.log('I can run');
console.log(tab);
//perform your tab switch now.
;
请告诉我们结果..
【讨论】：
谢谢，这正是我需要的！【参考方案2】：这里有一个可能对您有所帮助的示例。当您单击标签时，它会运行一个函数，然后根据单击的选项卡更改 iframe 中的 attr src。这是使用 JQuery。
function switchTabInIframe(whichOne)
var iframesource = "";
if (whichOne == 1)
iframesource = "http://google.com";
else if (whichOne == 2)
iframesource = "http://matthewbergwall.com";
else if (whichOne == 3)
iframesource = "http://***.com";
$("#ciframe").attr("src", iframesource);
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<script>
function switchTabInIframe(tab)
var tabId = $('#iframe_1').contents().find('#1');
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
;
</script>
<div id="exTab2" class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab" onclick="switchTabInIframe(1)" ;>1</a>
</li>
<li>
<a href="#2" data-toggle="tab" onclick="switchTabInIframe(2)">2</a>
</li>
<li>
<a href="#3" data-toggle="tab" onclick="switchTabInIframe(3)">3</a>
</li>
</ul>
<iframe src="iframe.html" frameborder="0" name="iframe_1" id="ciframe"></iframe>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>【讨论】：
这无济于事，我需要在 iframe 中操作 DOM，src 将始终相同。以上是关于在引导选项卡上单击 iframe 内的更改内容的主要内容，如果未能解决你的问题，请参考以下文章