Переключать свойства элементов привязки и изображения с помощью JavaScript - PullRequest
Новая
       3

Переключать свойства элементов привязки и изображения с помощью JavaScript

1 голос
/ 30 марта 2020

В настоящее время у меня есть одна веб-страница, которая содержит два элемента:

  • image (завернутый в привязку, загружает URL в iframe)
  • iframe (по умолчанию загружает themes.html)

Изображение при нажатии переключает / переключает iframe между themes.html и styles.html, а также источник изображения. Однако, несмотря на многочисленные учебники и посты на форуме, которые я читал в Интернете, я не могу заставить его работать.

Как бы я go сказал о переключении изображения при нажатии, а также о переключении источника iframe между двумя HTML файлами?

image

РЕДАКТИРОВАТЬ: Я полагаю, я мог бы, возможно, просто переключить свойство iframe src напрямую, но если я даже не могу получить src для переключения изображения, боюсь, я тоже не смогу заставить это работать.

РЕДАКТИРОВАТЬ 2: Я могу загрузить его styles.html в iframe с кодом ниже; однако, я не могу заставить его переключиться обратно на themes.html: 

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

1 Ответ

0 голосов
/ 30 марта 2020

Я полагаю, что у вас возникли проблемы, потому что вы используете element.attribute вместо element.getAttribute('attribute-name').

Так как image.sr c вернет абсолютный путь 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...