I'm having problem with iframe/pop-up showing old content.
I only have one iframe tag and then change the src of it with JavaScript to show different image albums.
So when you click the album name the src is changed and then trigger the pop-up.
Lets say you start opening album 1 then it loads nicely and no problem.
Then when you open the next album (album 2) then pictures from album 1 are shown for the first 3-7 seconds before the pictures from album 2 are shown.
How do I prevent this behaviour?
Here is my HTML code:
<div class="modal-content">
<iframe class="iframe" id="iframeurl" src="lpading.gif" frameborder="0" height="100%" width="100%" style="">
</iframe>
</div>
Here is my JavaScript code:
function showdiv() {
document.getElementById('iframeurl').src = data.nurl;
$("#gluggi1").trigger('click');
}
It sound lika normal behaviour due to loading the content. You can empty the iframe before you load the new content:
$('#iframeurl').attr('src', 'about:blank');
Related
I create an iframe with content, the page is displayed without an error. When I refresh the iframe (after 3 seconds), I get an 404. I've tried different approaches like adding a metadata refresh tag, plain JS, jquery,... A 'working' example can be found here; https://jsfiddle.net/RaZoR_BlaZe/ezswtxk7/32/
<div class="second-row">
<iframe name="presentatie" id="presframe" scrolling="no" frameborder="0" src="https://docs.google.com/presentation/d/
13WCxr5uG4Jqw8bPJzB6dIdQ3DP2H4nBFRH8FHxlqK0Q/preview"></iframe>
</div>
setInterval(function() {
$('#presframe').contentWindow.location.reload(true);
}, 3000);
I came across similar questions, but it did not have the exact problem/solution I was hoping for. I apologize in advance if this has been answered before and I missed it.
I have dynamic HTML code that I insert on AJAX return from db:
for(var i=0;i<data.Links.length;i++){
$('#vid-list').append('<li class="vid-item" onclick="startVideo(\''+data.Links[i]+'\')"><div class="thumb"><img src="'+ data.Thumb[i]+'"></div><div class="desc">'+data.Name[i]+'</div></li>');
}
data.links is an array of youtube embed links. data.Name is an array of titles, data.thumb is the respective thumbnail images and so on.
startVideo is a fucntion in my JS file defined as this:
$(function(){
function startVideo(srcUrl){
$('#popup2').style.display ='block';
document.getElementById('vid_frame').src=srcUrl;
}
});
It passes the link from the dynamic HTML to play the video in an iframe popup. The HTML code for that is :
<div class="vid-list-container">
<ul id="vid-list">
<!--need to insert videos here-->
</ul>
</div>
<div id="popup2" class="popup">
<iframe id="vid_frame" frameborder="0" height="315" src="" width="560" allowscriptaccess="always">
</iframe>
<a class="close" href="#" onclick="toggleVideo('hide')">
<img id="close-icon" src="../images/info-close-icon.png"></a></div>
</div>
So this is my problem: The HTML looks fine after loading. Data gets properly populated within the HTML elements.
But when I click on the video, no popup appears. i.e. startVideo() does not get called onClick event. This code worked fine with static HTML code. I read other questions and it was said that if the event happens after the dynamic element has completely loaded, there should not be problem with the binding.But that is not the case here.
Are there any other checks that I could do?
I am having a webpage load another webpage inside an iframe that takes up the entire screen. I have 2 div's that are on top of each other. These divs are actually anchors that direct to a new url (an action). What I am trying to do is once any of the divs is clicked, to initiate an onclick event that will go to the url specified in that anchor href, and then reload the initial index.html page. My class is working on a local enviroment to teach us a thing called clickjacking. Below is my current html.
The issue im having is I can have the anchor click go to the url I want, but then I am no longer in my index.html. Is it possible to open the referenced link in a new window, close the new window once its loaded and then refresh the index.html page. Once that is done to hide the div that was clicked since the "second" div is hidden behind the top most clickable div.
<html>
<head>
</head>
<body>
<center>
<!-- Two anchor divs that are clickable and on top of each other -->
<div id="secondDiv">
<a href="http://www.2ndURL.com" id="m2">
<div id="2" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
</div>
<div id="firstDiv">
<a href="#" id="m1" onclick="myFunction(); return false;">
<div id="1" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
<!-- Main iFrame where user interacts -->
</div>
<iframe id="new" src="http://www.mywebpage.com" style="opacity:1.0;width:100%;height:100%;">
</iframe>
</center>
</body>
<script>
function myFunction(){
var newWindow = window.open("http://www.actionURL");
newWindow.close()
var myWindow = window.open("file:///home/seed/Desktop/index.html", "_self");
}
</script>
</script>
</html>
TLDR:
Load iframe in webpage
click on anchor div on page that directs to a new url
load that url, once loaded go back to the index.html (all in one tab) (step 1)
hide the anchor div that was selected-- allowing second anchor to be
clicked
Thank you for your help.
It looks like you might need to "fake" the onclick if you want to have an onclick action work on the page you are on. You will need to modify the parameters, but here is a code that I have used:
$(function() {
// find out what our query parameters contain.
var query = location.search;
// isolate the position of the equal sign.
var equalIndex = query.indexOf('=');
// extract the image's id.
var imageId = query.substring(equalIndex + 1);
// click on the appropriate image.
$('#' + imageId).click();
});
The comments explain what each step of the code performs. In my case, I needed the page to load and then force the onclick using the unique image ids. In your case, you will need to tie it to your unique div. I hope that this helps you get started.
I have a webpage (called PageA) that has a header and a main navigation bar and then simply includes an iframe. Lets call the page within the iframe PageB. PageB simply has a list of products but there are a lot of products so you have to scroll down on PageA to view them all.
When I scroll down PageA to see the bottom of pageB and click on a product link it looks like it takes me to a blank page. What actually happens is that it brings up the product image and description but since the page that just has one product and its description is much shorter in height, the scroll bar stays at the same location and doesn't adjust for it. I have to scroll up to the top of the page to view the product, description and to see the add to cart button.
Is there anyway when I click a link on a page that is within an iframe, the outer pages scroll bar goes back up to the top?
<iframe src="shop.undergloled.com";; onload="window.scroll(0,0)"; width="980" height="1400" frameborder="0" style="display:block seamless;"> </iframe>
try this
<iframe src="http://shop.undergloled.com" onload="window.scroll(0,0)" width="980" height="1400" frameborder="0" style="display:block;"></iframe>
try it
<iframe src="http://shop.undergloled.com" onload="window.scroll(0,0)" width="980" height="1400" frameborder="0" style="display:table !important;"></iframe>
I'm using JS to build some HTML that includes the new iframe syntax from YouTube.
When someone clicks a link on the page to a YouTube video, JS checks the document size and if it's big enough, will open up a lightbox-style box on the page and play the video there.
When I test it out, it opens the HTML but the space is just white and the source code shows an empty <iframe> element.
Is there a problem with trying to dynamically add an iframe to a page?
Here is the relevant part of the JS:
iframe = '<iframe width="'+defaults.width+'" height="'+defaults.height+'" src="'+vidsrc+'" frameborder="0" allowfullscreen></iframe>';
container = '<div class="videopow-overlay"><div class="videopow-container">' + iframe + '</div></div>';
$("body").prepend( container );
Here is what gets output:
<div class="videopow-overlay">
<div class="videopow-container">
<iframe width="800" height="485" src="http://www.youtube.com/watch?v=phzvyIQWCo8?hd=1" frameborder="0" allowfullscreen="">
<html><head></head><body></body></html>
</iframe>
</div>
</div>
Change vidsrc from:
http://www.youtube.com/watch?v=phzvyIQWCo8?hd=1
to
http://www.youtube.com/embed/phzvyIQWCo8?hd=1