Develop Reference

Iframe only loads content on 2nd click

I have an iframe which is being loaded from a second url, and opening as a print window, in order to generate and print an invoice.
However the content will only appear the 2nd time I click the Invoice button, not the first. I've tried adding a timeout to the function but it has no effect.
<button type="button" onClick="$('#order_invoice').attr('src','/default.aspx/[url goes here');setTimeout(window.frames['order_invoice'].print(),500);" class="major" title="Tax Invoice">Tax Invoice</button>
<iframe id="order_invoice" name="order_invoice" class="order_invoice" src="" style="display:none;" scrolling="no"/>
When I click the button I get a blank page in the print preview, how can I delay the window opening until the content is loaded?

The best way to control such things is to put print functionality into function on the parent page, than to call this function from child iframe as parent.myFunction() from document.onLoad function of the child.

While loading the page, hide and not load content of chosen div. On click load chosen div and its content

So, I've tried to googling for it, but seems like that it is not my strongest part.
Example: I have a div with embed a video inside, but to show that video I have to click first on div which opens and shows the video. The problem is that it loads on pageload. It makes browser lags while there is more than 4-5 of those div with videos. How can I make it to not load withing pageload, but only when a div is clicked and unload its content when it is clicked again.
$('.cont').hide();
$('h4').click(function () {
var $answer = $(this).next('.cont');
if ($answer.is(':hidden')) {
$answer.show();
} else {
$answer.hide();
}
});
This is what I have, but it is not as I described it

<div class="container">
<iframe new-src="http://linktoadditionalcode">Update your Browser!</iframe>
Load
Unload
</div>
<script>
function load(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src=frame.new-src;
}
function unload(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src="";
}
</script>
this loads/unloads the iframe. While your code just hides it, this completely loads/nloads it.

jQuery appending iframe to div without reload

$("#div").append('<iframe width="200" height="100" src="https://www.youtube.com/embed/zoMYU_nOGNg?rel=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');
By using this example append cause page reload, maybe are some issue to load youtube iframe without reloading page
Demo: https://jsfiddle.net/0uqtn0u5/
My observation is wrong it's not realod the page.

Some browsers will treat <button> as a submit button and submit to the same page regardless of the button being a child of a form or not.
Change to
$('button').on('click', function(e){
e.preventDefault();
$("#youtube").append('<iframe width="200" height="100" src="https://www.youtube.com/embed/zoMYU_nOGNg?rel=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');
});
or add type="button" to it.
If you DO have a form, instead do make the button a submit button and prevent the default action on the form submit:
$('form').on('submit', function(e){
e.preventDefault();
$("#youtube").append('<iframe width="200" height="100" src="https://www.youtube.com/embed/zoMYU_nOGNg?rel=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');
});
There is no other reason for the page to reload. Your code should not and indeed does not reload anything in Chrome

Take a look: How to prevent an iframe from reloading when moving it in the DOM
"If you're trying to move it visually, you can try modifying the CSS to use absolute positioning or some other adjustments.
However, if you're trying to actually pull it out of the DOM and insert it somewhere else, you won't be able to avoid a reload."
~ John Fisher
Also:
https://stackoverflow.com/a/8318401/5444802
"It isn't possible to move an iframe from one place in the dom to another without it reloading."
~ Kevin B

Check the youtube api for iframe embedding
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Detect iFrame src change vs content reload

My basic code looks like this:
<iframe id="iFrame1" style="display: none;"></iframe>
<iframe id="iFrame2" style="display: none;"></iframe>
$("#iFrame1").load(function () {
// display iFrame1, hide iFrame2
// set timeout to load next page
});
$("#iFrame2").load(function () {
// display iFrame2, hide iFrame1
// set timeout to load next page
});
I have a set list of pages (same domain, no problems with being displayed inside an iFrame) that are to be displayed in the iFrames (only 1 iFrame is visible at a time), looping through on an interval of 30 minutes (the pages are displaying sporting results).
Basically the way this works is that the src of iFrame 1 is set using $("#iFrame1").attr("src", "<new_url>");. Once the page has fully loaded, the load function triggers and displays iFrame1, hiding iFrame2. A timeout function is then set to load the next page into iFrame2, which will trigger the load function and display iFrame2, hiding iFrame1. It has been done this way so that the loading of the page isn't visible to the user, the iFrame is only made visible once the page has finished loading which gives a smooth transition between pages.
This all works fine! The problem is that one of the pages is set to reload itself (location.reload(true);) at a specific time of the day, and I have no control over that page. Problem here is that the reload of that page also triggers the load function of that iFrame, which causes that iFrame to be incorrectly hidden.
My question is, is there a way to differentiate between the actual src of an iFrame changing, compared to just the content of the iFrame being reloaded (and the src staying the same)? I have had a look at document.referrer, but that gives me nothing.

I ended up solving my issue by adding a check to the load function of each iFrame to check if the iFrame is already visible or not. Only do the swap if the iFrame isn't currently visible..
<iframe id="iFrame1" style="display: none;"></iframe>
<iframe id="iFrame2" style="display: none;"></iframe>
$("#iFrame1").load(function () {
// If iFrame 1 is hidden, show it
if($("#iFrame1").css("display") == "none")
{
// display iFrame1, hide iFrame2
// set timeout to load next page
}
});
$("#iFrame2").load(function () {
// If iFrame 2 is hidden, show it
if($("#iFrame2").css("display") == "none")
{
// display iFrame2, hide iFrame1
// set timeout to load next page
}
});

Focus to an image of a HTML page

I have 4 images that when I click them they show information under the images and when I click the last ones the images go under the page and whens the new page loads with that information I have to go down with scroller to see the image and information of the last image.
I want to put focus to the last image when the new page loading.
I do this but it's not working:
<script>
function setFocusToTextBox(){
document.getElementById("abc").focus();
}
</script>
<img src="images/Practidose.fw.png" alt="" width="770" height="150" id="abc" onclick="setFocusToTextBox()"/>
Picture of the 4 images and when I click the last one I want to focus that image when the new page loads:

.focus() can normally only be applied to links or form inputs.
However, you can use it on arbitrary elements by giving the element a tabindex attribute.
This is usually a good idea for accessibility reasons anyway if you want to make use of onClick handlers, as this will help keyboard navigation and other accessibility tools understand that your element is supposed to be clickable.

I am not fully sure of why you want to focus the image you are ON, but try
function setFocusToTextBox(){
document.getElementById("abc").scrollIntoView();
}
If onload:
window.onload=function(){
document.getElementById("abc").scrollIntoView();
}