使用JavaScript更改鏈接和iframe源

Question

所以!!! ...好吧...這還有很多，但除了一個小細節，我已經完成了所有工作。 首先，我將嘗試解釋一下我要實現的目標...在側欄上，我有10個指向不同html文件的鏈接，這些鏈接將在iframe中顯示。 頁面中心的3個“版本”按鈕既可以用來更改這10個鏈接的目錄，還可以編輯<iframe src="xxx.html"/> 。 除了鏈接號為10之外，它都可以正常運行。在查找問題時，我沒有任何進展，但是<iframe src="xxxx.html"/>可以與除鏈接10之外的所有鏈接一起使用。

只是為了澄清，問題不在於sidenav鏈接。 據我所知，單擊版本按鈕時，所有鏈接都被修改到正確的目錄。 問題出在<iframe src="xxx.html"/>修改上，僅當鏈接10為“活動”鏈接時。

為了清楚地看到問題，您需要打開檢查器並找到iframe元素，以查看在任何鏈接1-9處於活動狀態時src值如何正確更改，但是在鏈接10處於活動狀態時目錄未正確修改。

重新編碼按鈕應將src鏈接到../example/recoded/xxxx.html

編碼按鈕應將src鏈接到../example/encoded/xxxx.html

PNG按鈕應將src鏈接到../example/img/xxxx.png

非常感謝幫忙。

 //Script /* function to add and remove active classes from clicked sidebar and versions buttons */ var selector, elems, makeActive, versBtn, btns; selector = '.sideUL li'; elems = document.querySelectorAll(selector); btns = document.getElementsByClassName('versions'); makeActive = function () { if(this.tagName == 'LI'){ for(var i = 0; i < elems.length; i++){ elems[i].classList.remove('active'); } }else if(this.tagName == 'DIV'){ for(var i = 0; i < btns.length; i++){ btns[i].classList.remove('active'); } } this.classList.add('active'); }; for(var i = 0; i < elems.length; i++){ elems[i].addEventListener('mousedown', makeActive); } for(var i = 0; i < btns.length; i++){ btns[i].addEventListener('mousedown', makeActive); } //Start of linkChange function /* primaryDir is the desired target link; firstSecondary is first search option; secondSecondary is designated for .png version; unless .png is primaryDir value; */ function linkChange(vers, primaryDir, firstSecondary, secondSecondary){ var link = '.sideUL li a'; var htmlRef, anchor, activeLink, linkIncludesPrim, linkIncludesFirst, linkIncludesSecond, iFra, activeRef; htmlRef = document.querySelectorAll(link); activeLink = document.querySelectorAll('.sideUL .active'); for(var i = 0; i < htmlRef.length; i++){ anchor = htmlRef[i]; activeRef = activeLink[0].children[0].href; linkIncludesPrim = anchor.href.includes(primaryDir); linkIncludesFirst = anchor.href.includes(firstSecondary); linkIncludesSecond = anchor.href.includes(secondSecondary); iFra = document.getElementById('iFCont'); if(vers === 'clean'){ if(linkIncludesPrim == true){ console.log("Alread Linked."); }else if(linkIncludesFirst == true){ anchor.href = anchor.href.replace(firstSecondary, primaryDir); iFra.src = activeRef; console.log(anchor.href); }else if(linkIncludesSecond == true){ anchor.href = anchor.href.replace(secondSecondary, primaryDir); anchor.href = anchor.href.replace(".png", ".html"); iFra.src = activeRef; iFra.src = iFra.src.replace(".png", ".html"); console.log(anchor.href); }else{ console.log("Error, no return."); } }else if(vers === 'encode'){ if(linkIncludesPrim == true){ console.log("Alread Linked."); }else if(linkIncludesFirst == true){ anchor.href = anchor.href.replace(firstSecondary, primaryDir); iFra.src = activeRef; console.log(anchor.href); }else if(linkIncludesSecond == true){ anchor.href = anchor.href.replace(secondSecondary, primaryDir); anchor.href = anchor.href.replace(".png", ".html"); iFra.src = activeRef; iFra.src = iFra.src.replace(".png", ".html"); console.log(anchor.href); }else{ console.log("Error, no return."); } }else if(vers === 'png'){ if(linkIncludesPrim == true){ console.log("Alread Linked."); }else if(linkIncludesFirst == true){ anchor.href = anchor.href.replace(firstSecondary, primaryDir); anchor.href = anchor.href.replace(".html", ".png"); iFra.src = activeRef; iFra.src = iFra.src.replace(".html", ".png"); console.log(anchor.href); }else if(linkIncludesSecond == true){ anchor.href = anchor.href.replace(secondSecondary, primaryDir); anchor.href = anchor.href.replace(".html", ".png"); iFra.src = activeRef; iFra.src = iFra.src.replace(".html", ".png"); console.log(anchor.href); }else{ console.log("Error, no return."); } } } } function changeFormat(ver){ var firstTxt = document.getElementById("firstStat"); var verText; if(ver === "reCode"){ linkChange('clean', "example/Recoded", "example/Encoded", "example/Img"); }else if(ver === 'enCode'){ linkChange('encode', "example/Encoded", "example/Recoded", "example/Img"); }else if(ver === 'img'){ linkChange('png', "example/Img", "example/Recoded", "example/Encoded"); } } function openNav() { document.getElementById("mySidenav").style.width = "200px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } 

 body { font-family: Georgia; color: #444; } .frame{ text-align: center; padding-bottom: 2em; } div.frame iframe{ background-color: #ffffff; } .sidenav li{ border-bottom: none; } .sidenav{ height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #666; overflow: hidden; transition: 0.5s; padding-top: 50px; text-align: left; overflow-y: auto; } .sidenav .closebtn{ right: 0; font-size: 3em; text-align: right; padding-right: 25px; } .sidenav a{ padding: 8px 8px 8px 32px; text-decoration: none; font-size: 1em; color: #f2f2f2; display: block; transition: 0.3s; } .sidenav a:hover{ background-color: #222; border-bottom: none; } .sideNavLogo{ position: fixed; left: 1%; bottom: 50%; width: 105px; } .versions{ color: #f2f2f2; width: 30%; float: left; min-width: 170px; display:block; cursor: pointer; border: 1px solid black; height: 60px; text-align: center; padding-top: 1% 0; border-radius: 10px; margin: 0 1%; background-color: #666666; } .versions:hover{ background-color: #222222; } .active{ background-color: #4CAF50; } 

 <div> <div class="versions" onclick="changeFormat('reCode')"> <p class="enlarge">Recoded version</p> </div> <div class="versions active" onclick="changeFormat('enCode')"> <p class="enlarge">Encoded version</p> </div> <div class="versions" onclick="changeFormat('img')"> <p class="enlarge">PNG version</p> </div> </div> <div class="frame"> <iframe src="./example/Encoded/20180112_example1.html" frameborder="no" scrolling="no" height="2450" width="620" name="content" id="iFCont">Sorry, your browser doesn't support inline iframes.</iframe> </div> <div id="mySidenav" class="sidenav"> <a href="#" class="closebtn" onclick="closeNav()">&times;</a> <ul class="sideUL"> <li class="active"> <a href="./example/Encoded/20180112_example1.html" target="content">Example 1</a> </li> <li> <a href="./example/Encoded/20180112_example2.html" target="content">Example 2</a> </li> <li> <a href="./example/Encoded/20180112_example3.html" target="content">Example 3</a> </li> <li> <a href="./example/Encoded/20180112_example4.html" target="content">Example 4</a> </li> <li> <a href="./example/Encoded/20180112_example5.html" target="content">Example 5</a> </li> <li> <a href="./example/Encoded/20180112_example6.html" target="content">Example 6</a> </li> <li> <a href="./example/Encoded/20180112_example7.html" target="content">Example 7</a> </li> <li> <a href="./example/Encoded/20180112_example8.html" target="content">Example 8</a> </li> <li> <a href="./example/Encoded/20180112_example9.html" target="content">Example 9</a> </li> <li> <a href="./example/Encoded/20180112_example10.html" target="content">Example 10</a> </li> </ul> </div> <div class="sideNavLogo"> <div style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Links</div> </div> 

Answer 1

我調試了錯誤。 所有編輯都對linkChange函數進行。 iFra.src =與其他一些變量定義一起移到了for循環之后。 這樣做減少了幾行。 保持聰明。

 //Script /* function to add and remove active classes from clicked sidebar and versions buttons */ var selector, elems, makeActive, versBtn, btns; selector = '.sideUL li'; elems = document.querySelectorAll(selector); btns = document.getElementsByClassName('versions'); makeActive = function () { if(this.tagName == 'LI'){ for(var i = 0; i < elems.length; i++){ elems[i].classList.remove('active'); } }else if(this.tagName == 'DIV'){ for(var i = 0; i < btns.length; i++){ btns[i].classList.remove('active'); } } this.classList.add('active'); }; for(var i = 0; i < elems.length; i++){ elems[i].addEventListener('mousedown', makeActive); } for(var i = 0; i < btns.length; i++){ btns[i].addEventListener('mousedown', makeActive); } //Start of linkChange function /* primaryDir is the desired target link; firstSecondary is first search option; secondSecondary is designated for .png version; unless .png is primaryDir value; */ function linkChange(vers, primaryDir, firstSecondary, secondSecondary){ var htmlRef, dir, activeLink, linkIncludesPrim, linkIncludesFirst, linkIncludesSecond, iFra, activeRef; htmlRef = document.querySelectorAll('.sideUL li a'); activeLink = document.querySelectorAll('.sideUL .active'); for(var i = 0; i < htmlRef.length; i++){ dir = htmlRef[i]; linkIncludesPrim = dir.href.includes(primaryDir); linkIncludesFirst = dir.href.includes(firstSecondary); linkIncludesSecond = dir.href.includes(secondSecondary); if(vers == 'clean'){ if(linkIncludesPrim == true){ console.log("Alread Linked."); }else if(linkIncludesFirst == true){ dir.href = dir.href.replace(firstSecondary, primaryDir); console.log(dir.href); }else if(linkIncludesSecond == true){ dir.href = dir.href.replace(secondSecondary, primaryDir); dir.href = dir.href.replace(".png", ".html"); console.log(dir.href); }else{ console.log("Error, no return."); } }else if(vers == 'encode'){ if(linkIncludesPrim == true){ console.log("Alread Linked."); }else if(linkIncludesFirst == true){ dir.href = dir.href.replace(firstSecondary, primaryDir); console.log(dir.href); }else if(linkIncludesSecond == true){ dir.href = dir.href.replace(secondSecondary, primaryDir); dir.href = dir.href.replace(".png", ".html"); console.log(dir.href); }else{ console.log("Error, no return."); } }else if(vers == 'png'){ if(linkIncludesPrim == true){ console.log("Alread Linked."); }else if(linkIncludesFirst == true){ dir.href = dir.href.replace(firstSecondary, primaryDir); dir.href = dir.href.replace(".html", ".png"); console.log(dir.href); }else if(linkIncludesSecond == true){ dir.href = dir.href.replace(secondSecondary, primaryDir); dir.href = dir.href.replace(".html", ".png"); console.log(dir.href); }else{ console.log("Error, no return."); } } } iFra = document.getElementById('iFCont'); activeRef = activeLink[0].children[0].href; iFra.src = activeRef; console.log("Frame source - " + iFra.src); } function changeFormat(ver){ var firstTxt = document.getElementById("firstStat"); var verText; if(ver === "reCode"){ linkChange('clean', "example/Recoded", "example/Encoded", "example/Img"); }else if(ver === 'enCode'){ linkChange('encode', "example/Encoded", "example/Recoded", "example/Img"); }else if(ver === 'img'){ linkChange('png', "example/Img", "example/Recoded", "example/Encoded"); } } function openNav() { document.getElementById("mySidenav").style.width = "200px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } 

 body { font-family: Georgia; color: #444; } .frame{ text-align: center; padding-bottom: 2em; } div.frame iframe{ background-color: #ffffff; } .sidenav li{ border-bottom: none; } .sidenav{ height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #666; overflow: hidden; transition: 0.5s; padding-top: 50px; text-align: left; overflow-y: auto; } .sidenav .closebtn{ right: 0; font-size: 3em; text-align: right; padding-right: 25px; } .sidenav a{ padding: 8px 8px 8px 32px; text-decoration: none; font-size: 1em; color: #f2f2f2; display: block; transition: 0.3s; } .sidenav a:hover{ background-color: #222; border-bottom: none; } .sideNavLogo{ position: fixed; left: 1%; bottom: 50%; width: 105px; } .versions{ color: #f2f2f2; width: 30%; float: left; min-width: 170px; display:block; cursor: pointer; border: 1px solid black; height: 60px; text-align: center; padding-top: 1% 0; border-radius: 10px; margin: 0 1%; background-color: #666666; } .versions:hover{ background-color: #222222; } .active{ background-color: #4CAF50; } 

 <div> <div class="versions" onclick="changeFormat('reCode')"> <p class="enlarge">Recoded version</p> </div> <div class="versions active" onclick="changeFormat('enCode')"> <p class="enlarge">Encoded version</p> </div> <div class="versions" onclick="changeFormat('img')"> <p class="enlarge">PNG version</p> </div> </div> <div class="frame"> <iframe src="./example/Encoded/20180112_example1.html" frameborder="no" scrolling="no" height="2450" width="620" name="content" id="iFCont">Sorry, your browser doesn't support inline iframes.</iframe> </div> <div id="mySidenav" class="sidenav"> <a href="#" class="closebtn" onclick="closeNav()">&times;</a> <ul class="sideUL"> <li class="active"> <a href="./example/Encoded/20180112_example1.html" target="content">Example 1</a> </li> <li> <a href="./example/Encoded/20180112_example2.html" target="content">Example 2</a> </li> <li> <a href="./example/Encoded/20180112_example3.html" target="content">Example 3</a> </li> <li> <a href="./example/Encoded/20180112_example4.html" target="content">Example 4</a> </li> <li> <a href="./example/Encoded/20180112_example5.html" target="content">Example 5</a> </li> <li> <a href="./example/Encoded/20180112_example6.html" target="content">Example 6</a> </li> <li> <a href="./example/Encoded/20180112_example7.html" target="content">Example 7</a> </li> <li> <a href="./example/Encoded/20180112_example8.html" target="content">Example 8</a> </li> <li> <a href="./example/Encoded/20180112_example9.html" target="content">Example 9</a> </li> <li> <a href="./example/Encoded/20180112_example10.html" target="content">Example 10</a> </li> </ul> </div> <div class="sideNavLogo"> <div style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Links</div> </div>