Question

我试图找出如何使用下拉菜单更改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>&lt;iframe&gt;src="Path of the zip file" scrolling="no" seamless="seamless"&gt;&lt;/iframe&gt;
          </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">&lt;iframe src="Path of the <strong>zip file downloaded from email</strong>" scrolling="no" seamless="seamless"&gt;&lt;/iframe&gt;
  </code></pre>

我已尝试过以上操作，但它会禁用下拉列表。如果有人能帮助我解决这个问题，会感激。

Answer 1

试试这个。它会根据点击的src的{{1}}更改iframe内<pre>的{{1}}。

＆＃13;

href

＆＃13;

<a>

＆＃13;

使用下拉列表自动更改代码

1 个答案: