iframe defined as null
1
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.
javascript jquery html iframe
edited Nov 22 at 17:50
Christheoreo
2218
asked Nov 22 at 17:39
Jake
5511
add a comment |
1
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.
javascript jquery html iframe
edited Nov 22 at 17:50
Christheoreo
2218
asked Nov 22 at 17:39
Jake
5511
What is your error, what line trigger the error?
– Below the Radar
Nov 22 at 17:53
@BelowtheRadar iframe url isn’t changing and if you visited the page “close” button doesn’t work
– Jake
Nov 22 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 at 18:29
Ok It's because I was using Firefox. In Chrome I see the close btn
– Below the Radar
Nov 22 at 18:31
did you mean to use#ibanneras the selector instead of#banner??
– rlemon
Nov 22 at 18:49
add a comment |
1
1
1
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.
javascript jquery html iframe
edited Nov 22 at 17:50
Christheoreo
2218
asked Nov 22 at 17:39
Jake
5511
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.
javascript jquery html iframe
javascript jquery html iframe
edited Nov 22 at 17:50
Christheoreo
2218
asked Nov 22 at 17:39
Jake
5511
edited Nov 22 at 17:50
Christheoreo
2218
asked Nov 22 at 17:39
Jake
5511
edited Nov 22 at 17:50
Christheoreo
2218
edited Nov 22 at 17:50
Christheoreo
2218
edited Nov 22 at 17:50
Christheoreo
2218
2218
asked Nov 22 at 17:39
Jake
5511
asked Nov 22 at 17:39
Jake
5511
asked Nov 22 at 17:39
Jake
5511
5511
What is your error, what line trigger the error?
– Below the Radar
Nov 22 at 17:53
@BelowtheRadar iframe url isn’t changing and if you visited the page “close” button doesn’t work
– Jake
Nov 22 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 at 18:29
Ok It's because I was using Firefox. In Chrome I see the close btn
– Below the Radar
Nov 22 at 18:31
did you mean to use#ibanneras the selector instead of#banner??
– rlemon
Nov 22 at 18:49
add a comment |
What is your error, what line trigger the error?
– Below the Radar
Nov 22 at 17:53
@BelowtheRadar iframe url isn’t changing and if you visited the page “close” button doesn’t work
– Jake
Nov 22 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 at 18:29
Ok It's because I was using Firefox. In Chrome I see the close btn
– Below the Radar
Nov 22 at 18:31
did you mean to use#ibanneras the selector instead of#banner??
– rlemon
Nov 22 at 18:49
What is your error, what line trigger the error?
– Below the Radar
Nov 22 at 17:53
What is your error, what line trigger the error?
– Below the Radar
Nov 22 at 17:53
@BelowtheRadar iframe url isn’t changing and if you visited the page “close” button doesn’t work
– Jake
Nov 22 at 17:59
@BelowtheRadar iframe url isn’t changing and if you visited the page “close” button doesn’t work
– Jake
Nov 22 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 at 18:29
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 at 18:29
Ok It's because I was using Firefox. In Chrome I see the close btn
– Below the Radar
Nov 22 at 18:31
Ok It's because I was using Firefox. In Chrome I see the close btn
– Below the Radar
Nov 22 at 18:31
did you mean to use
#ibanner as the selector instead of #banner ??– rlemon
Nov 22 at 18:49
did you mean to use
#ibanner as the selector instead of #banner ??– rlemon
Nov 22 at 18:49
add a comment |
1 Answer
1
active
oldest
votes
0
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");
}
answered Nov 22 at 18:37
Below the Radar
3,03743387
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 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 at 18:49
My current guess is there is a typo in the selector (which you've corrected in your version)
– rlemon
Nov 22 at 18:49
yes and the url wont change if there is no event listener for the localStorage
– Below the Radar
Nov 22 at 18:55
@BelowtheRadar Window still not closes or changes url
– Jake
Nov 22 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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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");
}
answered Nov 22 at 18:37
Below the Radar
3,03743387
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 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 at 18:49
My current guess is there is a typo in the selector (which you've corrected in your version)
– rlemon
Nov 22 at 18:49
yes and the url wont change if there is no event listener for the localStorage
– Below the Radar
Nov 22 at 18:55
@BelowtheRadar Window still not closes or changes url
– Jake
Nov 22 at 19:11
|
show 3 more comments
0
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");
}
answered Nov 22 at 18:37
Below the Radar
3,03743387
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 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 at 18:49
My current guess is there is a typo in the selector (which you've corrected in your version)
– rlemon
Nov 22 at 18:49
yes and the url wont change if there is no event listener for the localStorage
– Below the Radar
Nov 22 at 18:55
@BelowtheRadar Window still not closes or changes url
– Jake
Nov 22 at 19:11
|
show 3 more comments
0
0
0
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");
}
answered Nov 22 at 18:37
Below the Radar
3,03743387
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");
}
answered Nov 22 at 18:37
Below the Radar
3,03743387
edited Nov 22 at 19:25
answered Nov 22 at 18:37
Below the Radar
3,03743387
answered Nov 22 at 18:37
Below the Radar
3,03743387
answered Nov 22 at 18:37
Below the Radar
3,03743387
3,03743387
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 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 at 18:49
My current guess is there is a typo in the selector (which you've corrected in your version)
– rlemon
Nov 22 at 18:49
yes and the url wont change if there is no event listener for the localStorage
– Below the Radar
Nov 22 at 18:55
@BelowtheRadar Window still not closes or changes url
– Jake
Nov 22 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 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 at 18:49
My current guess is there is a typo in the selector (which you've corrected in your version)
– rlemon
Nov 22 at 18:49
yes and the url wont change if there is no event listener for the localStorage
– Below the Radar
Nov 22 at 18:55
@BelowtheRadar Window still not closes or changes url
– Jake
Nov 22 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 at 18:47
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 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 at 18:49
@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 at 18:49
My current guess is there is a typo in the selector (which you've corrected in your version)
– rlemon
Nov 22 at 18:49
My current guess is there is a typo in the selector (which you've corrected in your version)
– rlemon
Nov 22 at 18:49
yes and the url wont change if there is no event listener for the localStorage
– Below the Radar
Nov 22 at 18:55
yes and the url wont change if there is no event listener for the localStorage
– Below the Radar
Nov 22 at 18:55
@BelowtheRadar Window still not closes or changes url
– Jake
Nov 22 at 19:11
@BelowtheRadar Window still not closes or changes url
– Jake
Nov 22 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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is your error, what line trigger the error?
– Below the Radar
Nov 22 at 17:53
@BelowtheRadar iframe url isn’t changing and if you visited the page “close” button doesn’t work
– Jake
Nov 22 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 at 18:29
Ok It's because I was using Firefox. In Chrome I see the close btn
– Below the Radar
Nov 22 at 18:31
did you mean to use
#ibanneras the selector instead of#banner??– rlemon
Nov 22 at 18:49