iframe defined as null

My iframe should close on red button clicked and should sometimes change its src but chrome thinks my iframe is null. here's my website: https://broenot.netlify.com/articles/20-11-18
Here's my code from banners.js:

var bannerid = Math.floor(Math.random() * 2);

var bannerclosed = localStorage.getItem("bannerclosed");

  if (bannerclosed == "yes"){

    document.getElementById("ibanner").style.visibility = "hidden";

  }

  if (bannerid == 1){

    document.getElementById("ibanner").src = "/banners/banner2.html";

  }

  $('#banner').load(function(){

    var iframe = $('#ibanner').contents();

    iframe.find("#close").click(function(){

      $("#ibanner" ).animate({opacity: 0}, 500)

      setTimeout(bannerclose, 500); 

    });

  });

  function bannerclose(){

    document.getElementById("ibanner").style.visibility = "hidden";

    localStorage.setItem("bannerclosed", "yes");

  }

HTML:

<iframe src="/banners/banner1.html" frameborder="0" style="width: 40%; height: 150px; position: fixed; bottom: 0; left: 0; border-radius: 15px;" id="ibanner"></iframe>

Get other things on the website using F12 if you need.

edited Nov 22 '18 at 17:50

Christheoreo

2269

asked Nov 22 '18 at 17:39

Jake

85112

What is your error, what line trigger the error?

– Below the Radar
Nov 22 '18 at 17:53

@BelowtheRadar iframe url isn’t changing and if you visited the page “close” button doesn’t work

– Jake
Nov 22 '18 at 17:59

sorry I visited your page but that's not clear. I don't see any close button on your page. It would be better if you could create a jsfiddle that reproduce your problem.

– Below the Radar
Nov 22 '18 at 18:29

Ok It's because I was using Firefox. In Chrome I see the close btn

– Below the Radar
Nov 22 '18 at 18:31

did you mean to use #ibanner as the selector instead of #banner ??

– rlemon
Nov 22 '18 at 18:49

add a comment |

var bannerid = Math.floor(Math.random() * 2);

var bannerclosed = localStorage.getItem("bannerclosed");

  if (bannerclosed == "yes"){

    document.getElementById("ibanner").style.visibility = "hidden";

  }

  if (bannerid == 1){

    document.getElementById("ibanner").src = "/banners/banner2.html";

  }

  $('#banner').load(function(){

    var iframe = $('#ibanner').contents();

    iframe.find("#close").click(function(){

      $("#ibanner" ).animate({opacity: 0}, 500)

      setTimeout(bannerclose, 500); 

    });

  });

  function bannerclose(){

    document.getElementById("ibanner").style.visibility = "hidden";

    localStorage.setItem("bannerclosed", "yes");

  }

HTML:

<iframe src="/banners/banner1.html" frameborder="0" style="width: 40%; height: 150px; position: fixed; bottom: 0; left: 0; border-radius: 15px;" id="ibanner"></iframe>

Get other things on the website using F12 if you need.

edited Nov 22 '18 at 17:50

Christheoreo

2269

asked Nov 22 '18 at 17:39

Jake

85112

What is your error, what line trigger the error?

– Below the Radar
Nov 22 '18 at 17:53

@BelowtheRadar iframe url isn’t changing and if you visited the page “close” button doesn’t work

– Jake
Nov 22 '18 at 17:59

sorry I visited your page but that's not clear. I don't see any close button on your page. It would be better if you could create a jsfiddle that reproduce your problem.

– Below the Radar
Nov 22 '18 at 18:29

Ok It's because I was using Firefox. In Chrome I see the close btn

– Below the Radar
Nov 22 '18 at 18:31

did you mean to use #ibanner as the selector instead of #banner ??

– rlemon
Nov 22 '18 at 18:49

add a comment |

var bannerid = Math.floor(Math.random() * 2);

var bannerclosed = localStorage.getItem("bannerclosed");

  if (bannerclosed == "yes"){

    document.getElementById("ibanner").style.visibility = "hidden";

  }

  if (bannerid == 1){

    document.getElementById("ibanner").src = "/banners/banner2.html";

  }

  $('#banner').load(function(){

    var iframe = $('#ibanner').contents();

    iframe.find("#close").click(function(){

      $("#ibanner" ).animate({opacity: 0}, 500)

      setTimeout(bannerclose, 500); 

    });

  });

  function bannerclose(){

    document.getElementById("ibanner").style.visibility = "hidden";

    localStorage.setItem("bannerclosed", "yes");

  }

HTML:

<iframe src="/banners/banner1.html" frameborder="0" style="width: 40%; height: 150px; position: fixed; bottom: 0; left: 0; border-radius: 15px;" id="ibanner"></iframe>

Get other things on the website using F12 if you need.

edited Nov 22 '18 at 17:50

Christheoreo

2269

asked Nov 22 '18 at 17:39

Jake

85112

var bannerid = Math.floor(Math.random() * 2);

var bannerclosed = localStorage.getItem("bannerclosed");

  if (bannerclosed == "yes"){

    document.getElementById("ibanner").style.visibility = "hidden";

  }

  if (bannerid == 1){

    document.getElementById("ibanner").src = "/banners/banner2.html";

  }

  $('#banner').load(function(){

    var iframe = $('#ibanner').contents();

    iframe.find("#close").click(function(){

      $("#ibanner" ).animate({opacity: 0}, 500)

      setTimeout(bannerclose, 500); 

    });

  });

  function bannerclose(){

    document.getElementById("ibanner").style.visibility = "hidden";

    localStorage.setItem("bannerclosed", "yes");

  }

HTML:

<iframe src="/banners/banner1.html" frameborder="0" style="width: 40%; height: 150px; position: fixed; bottom: 0; left: 0; border-radius: 15px;" id="ibanner"></iframe>

Get other things on the website using F12 if you need.

javascript jquery html iframe

edited Nov 22 '18 at 17:50

Christheoreo

2269

asked Nov 22 '18 at 17:39

Jake

85112

edited Nov 22 '18 at 17:50

Christheoreo

2269

asked Nov 22 '18 at 17:39

Jake

85112

edited Nov 22 '18 at 17:50

Christheoreo

2269

edited Nov 22 '18 at 17:50

Christheoreo

2269

edited Nov 22 '18 at 17:50

Christheoreo

2269

asked Nov 22 '18 at 17:39

Jake

85112

asked Nov 22 '18 at 17:39

Jake

85112

asked Nov 22 '18 at 17:39

Jake

85112

What is your error, what line trigger the error?

– Below the Radar
Nov 22 '18 at 17:53

@BelowtheRadar iframe url isn’t changing and if you visited the page “close” button doesn’t work

– Jake
Nov 22 '18 at 17:59

sorry I visited your page but that's not clear. I don't see any close button on your page. It would be better if you could create a jsfiddle that reproduce your problem.

– Below the Radar
Nov 22 '18 at 18:29

Ok It's because I was using Firefox. In Chrome I see the close btn

– Below the Radar
Nov 22 '18 at 18:31

did you mean to use #ibanner as the selector instead of #banner ??

– rlemon
Nov 22 '18 at 18:49

add a comment |

What is your error, what line trigger the error?

– Below the Radar
Nov 22 '18 at 17:53

@BelowtheRadar iframe url isn’t changing and if you visited the page “close” button doesn’t work

– Jake
Nov 22 '18 at 17:59

sorry I visited your page but that's not clear. I don't see any close button on your page. It would be better if you could create a jsfiddle that reproduce your problem.

– Below the Radar
Nov 22 '18 at 18:29

Ok It's because I was using Firefox. In Chrome I see the close btn

– Below the Radar
Nov 22 '18 at 18:31

did you mean to use #ibanner as the selector instead of #banner ??

– rlemon
Nov 22 '18 at 18:49

What is your error, what line trigger the error?

– Below the Radar
Nov 22 '18 at 17:53

@BelowtheRadar iframe url isn’t changing and if you visited the page “close” button doesn’t work

– Jake
Nov 22 '18 at 17:59

sorry I visited your page but that's not clear. I don't see any close button on your page. It would be better if you could create a jsfiddle that reproduce your problem.

– Below the Radar
Nov 22 '18 at 18:29

Ok It's because I was using Firefox. In Chrome I see the close btn

– Below the Radar
Nov 22 '18 at 18:31

did you mean to use #ibanner as the selector instead of #banner ??

– rlemon
Nov 22 '18 at 18:49

add a comment |

1 Answer
1

active

oldest

votes

The url wont change if you just set a localStorage item. First, you have to add an event listener on the storage event:

Edit: Use .ready() instead of .load() for disambiguity

window.addEventListener('storage', function(event){

    if (event.storageArea === localStorage) {

        var bannerclosed = localStorage.getItem("bannerclosed");

        if (bannerclosed == "yes"){

            document.getElementById("ibanner").style.visibility = "hidden";

        }

        if (bannerid == 1){

            document.getElementById("ibanner").src = "/banners/banner2.html";

        }

    }

}, false);



$('#ibanner').ready(function(){

  var $iframe = $('#ibanner');

  $iframe.find("#close").click(function(){

    $iframe.animate({opacity: 0}, 500);

    setTimeout(bannerclose, 500); 

  });

});



function bannerclose(){

    document.getElementById("ibanner").style.visibility = "hidden";

    localStorage.setItem("bannerclosed", "yes");

}

edited Nov 22 '18 at 19:25

answered Nov 22 '18 at 18:37

Below the Radar

3,29853388

api.jquery.com/load-event jQuery likes to "overload" many of the methods. you can use .load to wait for the load event.

– rlemon
Nov 22 '18 at 18:47

@rlemon ok so the problem is that code to change the url is not called after the close button was clicked

– Below the Radar
Nov 22 '18 at 18:49

My current guess is there is a typo in the selector (which you've corrected in your version)

– rlemon
Nov 22 '18 at 18:49

yes and the url wont change if there is no event listener for the localStorage

– Below the Radar
Nov 22 '18 at 18:55

@BelowtheRadar Window still not closes or changes url

– Jake
Nov 22 '18 at 19:11

|
show 3 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435986%2fiframe-defined-as-null%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

The url wont change if you just set a localStorage item. First, you have to add an event listener on the storage event:

Edit: Use .ready() instead of .load() for disambiguity

window.addEventListener('storage', function(event){

    if (event.storageArea === localStorage) {

        var bannerclosed = localStorage.getItem("bannerclosed");

        if (bannerclosed == "yes"){

            document.getElementById("ibanner").style.visibility = "hidden";

        }

        if (bannerid == 1){

            document.getElementById("ibanner").src = "/banners/banner2.html";

        }

    }

}, false);



$('#ibanner').ready(function(){

  var $iframe = $('#ibanner');

  $iframe.find("#close").click(function(){

    $iframe.animate({opacity: 0}, 500);

    setTimeout(bannerclose, 500); 

  });

});



function bannerclose(){

    document.getElementById("ibanner").style.visibility = "hidden";

    localStorage.setItem("bannerclosed", "yes");

}

edited Nov 22 '18 at 19:25

answered Nov 22 '18 at 18:37

Below the Radar

3,29853388

api.jquery.com/load-event jQuery likes to "overload" many of the methods. you can use .load to wait for the load event.

– rlemon
Nov 22 '18 at 18:47

@rlemon ok so the problem is that code to change the url is not called after the close button was clicked

– Below the Radar
Nov 22 '18 at 18:49

My current guess is there is a typo in the selector (which you've corrected in your version)

– rlemon
Nov 22 '18 at 18:49

yes and the url wont change if there is no event listener for the localStorage

– Below the Radar
Nov 22 '18 at 18:55

@BelowtheRadar Window still not closes or changes url

– Jake
Nov 22 '18 at 19:11

|
show 3 more comments

The url wont change if you just set a localStorage item. First, you have to add an event listener on the storage event:

Edit: Use .ready() instead of .load() for disambiguity

window.addEventListener('storage', function(event){

    if (event.storageArea === localStorage) {

        var bannerclosed = localStorage.getItem("bannerclosed");

        if (bannerclosed == "yes"){

            document.getElementById("ibanner").style.visibility = "hidden";

        }

        if (bannerid == 1){

            document.getElementById("ibanner").src = "/banners/banner2.html";

        }

    }

}, false);



$('#ibanner').ready(function(){

  var $iframe = $('#ibanner');

  $iframe.find("#close").click(function(){

    $iframe.animate({opacity: 0}, 500);

    setTimeout(bannerclose, 500); 

  });

});



function bannerclose(){

    document.getElementById("ibanner").style.visibility = "hidden";

    localStorage.setItem("bannerclosed", "yes");

}

edited Nov 22 '18 at 19:25

answered Nov 22 '18 at 18:37

Below the Radar

3,29853388

api.jquery.com/load-event jQuery likes to "overload" many of the methods. you can use .load to wait for the load event.

– rlemon
Nov 22 '18 at 18:47

@rlemon ok so the problem is that code to change the url is not called after the close button was clicked

– Below the Radar
Nov 22 '18 at 18:49

My current guess is there is a typo in the selector (which you've corrected in your version)

– rlemon
Nov 22 '18 at 18:49

yes and the url wont change if there is no event listener for the localStorage

– Below the Radar
Nov 22 '18 at 18:55

@BelowtheRadar Window still not closes or changes url

– Jake
Nov 22 '18 at 19:11

|
show 3 more comments

The url wont change if you just set a localStorage item. First, you have to add an event listener on the storage event:

Edit: Use .ready() instead of .load() for disambiguity

window.addEventListener('storage', function(event){

    if (event.storageArea === localStorage) {

        var bannerclosed = localStorage.getItem("bannerclosed");

        if (bannerclosed == "yes"){

            document.getElementById("ibanner").style.visibility = "hidden";

        }

        if (bannerid == 1){

            document.getElementById("ibanner").src = "/banners/banner2.html";

        }

    }

}, false);



$('#ibanner').ready(function(){

  var $iframe = $('#ibanner');

  $iframe.find("#close").click(function(){

    $iframe.animate({opacity: 0}, 500);

    setTimeout(bannerclose, 500); 

  });

});



function bannerclose(){

    document.getElementById("ibanner").style.visibility = "hidden";

    localStorage.setItem("bannerclosed", "yes");

}

edited Nov 22 '18 at 19:25

answered Nov 22 '18 at 18:37

Below the Radar

3,29853388

The url wont change if you just set a localStorage item. First, you have to add an event listener on the storage event:

Edit: Use .ready() instead of .load() for disambiguity

window.addEventListener('storage', function(event){

    if (event.storageArea === localStorage) {

        var bannerclosed = localStorage.getItem("bannerclosed");

        if (bannerclosed == "yes"){

            document.getElementById("ibanner").style.visibility = "hidden";

        }

        if (bannerid == 1){

            document.getElementById("ibanner").src = "/banners/banner2.html";

        }

    }

}, false);



$('#ibanner').ready(function(){

  var $iframe = $('#ibanner');

  $iframe.find("#close").click(function(){

    $iframe.animate({opacity: 0}, 500);

    setTimeout(bannerclose, 500); 

  });

});



function bannerclose(){

    document.getElementById("ibanner").style.visibility = "hidden";

    localStorage.setItem("bannerclosed", "yes");

}

edited Nov 22 '18 at 19:25

answered Nov 22 '18 at 18:37

Below the Radar

3,29853388

edited Nov 22 '18 at 19:25

answered Nov 22 '18 at 18:37

Below the Radar

3,29853388

answered Nov 22 '18 at 18:37

Below the Radar

3,29853388

answered Nov 22 '18 at 18:37

Below the Radar

3,29853388

api.jquery.com/load-event jQuery likes to "overload" many of the methods. you can use .load to wait for the load event.

– rlemon
Nov 22 '18 at 18:47

@rlemon ok so the problem is that code to change the url is not called after the close button was clicked

– Below the Radar
Nov 22 '18 at 18:49

My current guess is there is a typo in the selector (which you've corrected in your version)

– rlemon
Nov 22 '18 at 18:49

yes and the url wont change if there is no event listener for the localStorage

– Below the Radar
Nov 22 '18 at 18:55

@BelowtheRadar Window still not closes or changes url

– Jake
Nov 22 '18 at 19:11

|
show 3 more comments

api.jquery.com/load-event jQuery likes to "overload" many of the methods. you can use .load to wait for the load event.

– rlemon
Nov 22 '18 at 18:47

@rlemon ok so the problem is that code to change the url is not called after the close button was clicked

– Below the Radar
Nov 22 '18 at 18:49

My current guess is there is a typo in the selector (which you've corrected in your version)

– rlemon
Nov 22 '18 at 18:49

yes and the url wont change if there is no event listener for the localStorage

– Below the Radar
Nov 22 '18 at 18:55

@BelowtheRadar Window still not closes or changes url

– Jake
Nov 22 '18 at 19:11

api.jquery.com/load-event jQuery likes to "overload" many of the methods. you can use .load to wait for the load event.

– rlemon
Nov 22 '18 at 18:47

@rlemon ok so the problem is that code to change the url is not called after the close button was clicked

– Below the Radar
Nov 22 '18 at 18:49

My current guess is there is a typo in the selector (which you've corrected in your version)

– rlemon
Nov 22 '18 at 18:49

yes and the url wont change if there is no event listener for the localStorage

– Below the Radar
Nov 22 '18 at 18:55

@BelowtheRadar Window still not closes or changes url

– Jake
Nov 22 '18 at 19:11

|
show 3 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr