Javascript打开iframe并隐藏图像？

Question

I am trying to open an iframe on click and hide the image.我正在尝试单击打开 iframe 并隐藏图像。 Any help as to why this does not work would be great!关于为什么这不起作用的任何帮助都会很棒！ Thanks谢谢

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>test</title>
</head>

<body>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#button').click(function () {
                if (!$('#iframe').length) {
                    $('#iframeHolder').html('<iframe id="iframe" src="http://www.test.com" width="100%" height="700"></iframe>');
                    document.getElementById('loadingimage').style.visibility = 'hidden';
                }
            });
        });
    </script>

    <div id="button"><img id "loadingimage"class="alignnone size-full wp-image-2077" src="https://www.test.jpg"
            alt="test image" width="860" height="474" /></div>
    <div id="iframeHolder"></div>

</body>

Answer 1

Several points:几点：

As @stud3nt noted, your HTML is invalid.正如@stud3nt 所指出的，您的 HTML 无效。 Also a space is missing between "loadingimage" and class . "loadingimage"和class之间也缺少一个空格。 You should be using an editor that highlights HTML and JavaScript syntax errors.您应该使用高亮显示 HTML 和 JavaScript 语法错误的编辑器。
Use proper the HTML elements for the proper job.使用正确的 HTML 元素来完成正确的工作。 If you want to have a button, then use a <button> element and not a <div> element.如果你想要一个按钮，那么使用<button>元素而不是<div>元素。
Hiding the image inside the "button" with visibility: hidden is strange thing to do.将图像隐藏在具有visibility: hidden的“按钮”内visibility: hidden是一件奇怪的事情。 This won't remove the button element, so it's still there and still can be clicked.这不会删除按钮元素，所以它仍然存在并且仍然可以被点击。 Learn the difference between visibility: hidden and display: none .了解visibility: hidden和display: none之间的区别。 When you are using jQuery you can use .hide() and you should use it on the "button" itself and not its content.当您使用 jQuery 时，您可以使用.hide()并且您应该在“按钮”本身而不是其内容上使用它。
jQuery 1.6.0 is ancient. jQuery 1.6.0 是古老的。 Either use a current version, or better, don't use jQuery at all.要么使用当前版本，要么更好，根本不使用 jQuery。 For one jQuery isn't really necessary anymore and also as a beginner you should learn how to write plain JavaScript.对于一个 jQuery 不再是真正必要的，并且作为初学者，您应该学习如何编写纯 JavaScript。

Answer 2

There is typo in your img html element.您的img html 元素中有错字。
You forgot to add = in <img id "loadingimage" ...您忘记在<img id "loadingimage" ...添加= <img id "loadingimage" ...
Correct code - <img id="loadingimage" ...正确的代码- <img id="loadingimage" ...

Javascript打开iframe并隐藏图像？

问题描述

2 个解决方案

解决方案1
1 2019-12-06 09:01:58

解决方案2
0 2019-12-06 08:32:59

Javascript打开iframe并隐藏图像？

问题描述

2 个解决方案

解决方案1 1 2019-12-06 09:01:58

解决方案2 0 2019-12-06 08:32:59

解决方案1
1 2019-12-06 09:01:58

解决方案2
0 2019-12-06 08:32:59