我试图弄清楚如何使用下拉菜单更改HTML代码。
这是我目前拥有的
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Languages</button>
<div id="myDropdown" class="dropdown-content">
<a href="(URL LINK)/clients/1080/Canon.html?lc=uk" target="test">English</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=de" target="test">German</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=fr" target="test">French</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=es" target="test">Spanish</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=it" target="test">Italian</a>
</div>
</div>
这会更改下拉菜单下方的iFrame。
<iframe name="test" src="(URL LINK)/clients/1080/Canon.html?lc=uk" scrolling="no" seamless="seamless"></iframe>
在iFrame下，我有一个预代码，显示如何嵌入以上iFrame。
<pre><code><iframe>src="Path of the zip file" scrolling="no" seamless="seamless"></iframe>
</code></pre>
我正在使用的Javascript
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
当用户单击下拉菜单并选择一种语言时，是否可以实现用于托管iFrame文件夹的链接的更改？
例如，用户将单击下拉菜单并选择德语。前置代码将显示iframe以及指向德语文件夹的链接。 （希望如此）
如果有人可以协助我，将不胜感激。
我尝试过和失败的
jQuery的
myFunction() {
$("#myDropdown > a").on('click', function(){
var url= $(this).attr('href'); //Get URL from a href
var $iframe = $('#iframeId'); // Get Iframe id
$iframe.attr('src',url); // Insert new URL
var v= $('#code').text(); //get Iframe inside code tags
var code = jQuery('<div />').html(v).text(); //Convert to HTML object
var n = $(code).attr("src",val); //change the src
var fin = $(n).prop("outerHTML"); //get the HTML
var finHTML = jQuery('<div />').text(fin).html(); //Convert HTML into HTML entities
$('#code').text(finHTML); // Change code HTML
});
}
iFrame
<iframe src="#" id="iframeId"></iframe>
导出iFrame（以文本形式）
<pre><code id="code"><iframe src="Path of the <strong>zip file downloaded from email</strong>" scrolling="no" seamless="seamless"></iframe>
</code></pre>
我已经尝试了上面的方法，但是它使下拉菜单无法正常工作。如果有人可以帮助我解决此问题，将不胜感激。
最佳答案
尝试这个。它将根据单击的src的iframe更改<pre>中href的<a>。
var myDropdown = document.getElementById('myDropdown');
var links = myDropdown.getElementsByTagName('a'); // get all links inside #myDropdown
function changeSRC(e) {
var link = e.target.href; // get href of clicked link
var code = document.getElementsByTagName('code')[0];
code.innerHTML = '<iframe>src="'+link+'" scrolling="no" seamless="seamless"></iframe>';
}
for( var i=0; i<links.length; i++) {
links[i].addEventListener('click', changeSRC); // call changeSRC function when any link is clicked
}<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Languages</button>
<div id="myDropdown" class="dropdown-content">
<a href="(URL LINK)/clients/1080/Canon.html?lc=uk" target="test">English</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=de" target="test">German</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=fr" target="test">French</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=es" target="test">Spanish</a>
<a href="(URL LINK)/clients/1080/Canon.html?lc=it" target="test">Italian</a>
</div>
</div>
<pre>
<code><iframe>src="Path of the zip file" scrolling="no" seamless="seamless"></iframe></code>
</pre>