通过 JavaScript 切换锚点和图像元素的属性答案

【问题标题】：Toggle properties of anchor and image elements via JavaScript通过 JavaScript 切换锚点和图像元素的属性
【发布时间】：2020-03-30 18:08:44
【问题描述】：

我目前有一个包含两个元素的网页：

图片（包裹在锚点中，在 iframe 中加载 URL）
iframe（默认加载 themes.html）

图像，点击后，在themes.html 和styles.html 之间切换/切换 iframe，以及图像源。然而，尽管我在网上阅读了许多教程和论坛帖子，但我无法让它发挥作用。

如何在单击时切换图像，以及在两个 HTML 文件之间切换 iframe 的源？

<!DOCTYPE HTML>
<html>
<head>
    <title>Manager</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="assets/css/main.css" />
</head>

<body>

    <div class="switch">
        <a href="styles.html" target="switchframe" id="toggleURL" onclick="toggleURL();">
        <img src="images/segment-theme.png" id="toggleImage" onclick="toggleImage();"/></a>

        <iframe id="frame" name="switchframe" src="themes.html"></iframe>
    </div>

    <script>
        function toggleImage() {
            var img1 = "images/segment-theme.png";
            var img2 = "images/segment-style.png";
            var imgElement = document.getElementById('toggleImage');
            imgElement.src = (imgElement.src === img1)? img2 : img1;
        }

        function toggleURL() {
            var url1 = "themes.html"
            var url2 = "styles.html"
            var urlElement = document.getElementById('toggleURL');
            urlElement.href = (urlElement.href === url1)? url2 : url1;
        }
    </script>

</body>
</html>

编辑： 我想我可以让它直接切换 iframe 的 src 属性，但如果我什至无法让图像的 src 开始切换，我担心我也无法让它工作。

编辑 2： 我可以使用下面的代码在 iframe 中加载 styles.html；但是，我无法让它切换回themes.html：

function toggleURL() {
    var url1 = "themes.html"
    var url2 = "styles.html"
    var urlElement = document.getElementById('frame');
    urlElement.src = (urlElement.src === url1)? url2 : url1;
}

【问题讨论】：

标签： javascript html css iframe

【解决方案1】：

我相信您遇到问题是因为您使用的是 element.attribute 而不是 element.getAttribute('attribute-name')。

由于 image.src 将返回绝对路径 www.domain.com/path/to/image.png 其中 getAttribute 返回元素中指定的值。

此外，您的案例只需要一个事件处理程序。

<html>

<head>
    <title>Manager</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="assets/css/main.css" />
</head>

<body>
    <div class="switch">
        <a href="styles.html" id="toggleURL" onclick="toggle(event);">
            <img src="images/segment-theme.png" id="toggleImage" />
        </a>

        <iframe id="frame" src="themes.html"></iframe>
    </div>

    <script>
        function toggle(e) {
            e.preventDefault();
            var img1 = "images/segment-theme.png";
            var img2 = "images/segment-style.png";
            var imgElement = document.getElementById('toggleImage');
            var src = imgElement.getAttribute('src');
            imgElement.setAttribute('src', (src === img1) ? img2 : img1)

            var url1 = "themes.html"
            var url2 = "styles.html"
            var urlElement = document.getElementById('toggleURL');
            var href = urlElement.getAttribute('href');
            document.getElementById('frame').setAttribute('src', href)
            urlElement.setAttribute('href', (href === url1) ? url2 : url1)
        }
    </script>

</body>

</html>

【讨论】：