Firefox blocks invisible elements/plugins from loading. What to do?

A

akdes2018-08-09 18:22:44

Facebook

akdes, 2018-08-09 18:22:44

Hi all.
We are talking about the Share button from Facebook.
I need to hide a button and only show it if the user clicks another one.
What's the problem, voila:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="fb-root"></div>
<script>
(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v3.1';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

function showShareButton() {
 document.getElementById("sharebuttondiv").style.display = 'block';
}
</script>
<button onclick="showShareButton()">Let me share</button>
<div id="sharebuttondiv" style="display:none">
    <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="large" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
</div>
</body>
</html>

The code is not in jsfiddle, because it does not allow you to test the button.
So, everything is cool in chrome and safari. But if you take Firefox, it does not pull up the button while the div is invisible. Those. if you open this code in it, then the "share" button will not be rendered.
However, I went further, and logically, the problem is in the page parser - if you click on this button while the page is loading, the button will be drawn. I don’t know how to programmatically influence the download, but I even succeeded with a local file.
Any idea what to do with it?
Thanks

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander Taratin, 2018-08-09
@akdes

Instead of display:none
use
visibility:hidden
or
opacity:0 + pointer-events:none