We Keep Coding

Add custom HTML in iFrame that already has a page loaded in it

I have a button and an iframe. When button is clicked, it opens a page in the iframe. I have another button, when it is clicked, it is supposed to add custom html to the already loaded page in the iframe, but it is not working.
HTML:
Load page in Iframe
Update iframe
<iframe src="" width="100%" height="500px" id="main_iframe"></iframe>
The jQuery to load page in iframe is working fine:
function site_load_1() {
$('#main_iframe').attr('src', "https://bing.com");
}
The jQuery to update iframe with custom html is not working:
function update_iframe() {
var myFrame = $("#main_iframe").contents().find('body');
var newContent = "<h1>hello</h1>";
myFrame.html(newContent);
}
However, it does work when the iframe is empty, as in, when page has not been loaded into it via the first button.

Close iFrame On Button Click Within Itself

I load an iFrame of another page of my website dynamically. I would like to close the iFrame by clicking on an "X" button within the iFrame. I have created a Jquery function in my main JavaScript file, and I have also added some Javascript to my page frame itself (within my own domain).
In my main JS file:
var closeIFrame = function() {
$('#iframeContact').remove();
$("#overlay").toggleClass("overflowhidden overflow");
};
On my iFrame page (at the bottom of the page's HTML):
<script>
$("#menuOverlayBack").click(function(){
parent.closeIFrame();
}
I even have tried putting an "onclick" HTML element on my button to no avail:
<i class="menuOverlayBack material-icons" id="menuOverlayBack" onclick="parent.closeIFrame()">arrow_back</i>

Try using jQuery to modify the visibility of the iframe when "x" is clicked..
$("#close").click(function() {
$("#myIframe").css({"display": 'none'});
});

Click over an iFrame by clicking dynamically on certain coordinates

I am trying to click over an iframe, where there is a button, by clicking dynamically on certain coordinates. I created a button which dinamically clicks on the coordinates where that button is located, but it does not work.
In this JSFiddle sample I have the button clicks on the coordinate of x=30px and y=30px of the document where the bing logo is located, but when I click on the button, the Bing logo in iframe does not trigger.
<div class="button">Click Here</div>
<iframe src="https://www.bing.com/images" width="200" height="70"></iframe>
<script>
function clicktransfer(x, y) {
jQuery(document.elementFromPoint(x, y)).click();
}
$( ".gray" ).click(function() {
clicktransfer(30, 30);
});
</script>
Click here for JSFiddle
Any thoughts?

Your script has accessed to the main document. The document in the iframe is a separate document with its own DOM structure.
You may access it like this:
var doc = $('iframe')[0].contentWindow.document;
But with a cross-domain restriction. In other words, you CAN NOT access a document in the iframe that has a different origin.

iframe store in variable and append it

My bootstrap modal play a video that loads in a iframe.
Now i want to make my iframe data null first when click modal close button then insert a iframe from background on this iframe
my code
$('#abc_55').on('hide', function () {
var newSrc="http://www.youtube.com/embed/XGSy3_Czz8k";
document.getElementById("preview-frame").src='';
document.getElementById("preview-frame").src=newSrc;
});
But its not work

how to use popup in iframe that covers the whole page which contains the iframe?

I want to create an iframe of size 200X200. and i want to use a popup code in it. but i am facing a problem,
currently the pop up is showing when i click on the space 200x200 but i want the popup to be displayed when i click on the page which have the iframe. (not only the iframe area but the whole page)
whenever i place the iframe on a page i want the popup to be apear as it's the popup of the original page not the iframe only.
Any one have any idea how i can perform this action with html, javascript or jquery?
Thanks

Use autoresize javascript code
<script type="Text/JavaScript" language="JavaScript">
<!--
function resize_iframe()
{
var height=window.innerWidth;//Firefox
if (document.body.clientHeight)
{
height=document.body.clientHeight;//IE
}
//resize the iframe according to the size of the
//window (all these should be on the same line)
document.getElementById("cam").style.height=parseInt(height-
document.getElementById("cam").offsetTop-8)+"px";
}
// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe;
//Instead of using this you can use:
// <BODY onresize="resize_iframe()">
</script>
</head>
<body>
<iframe id="cam" width="100%" scrolling="yes" src="http://www.your_page.com" onload="resize_iframe()">
</iframe>
</body>
this will help for you

Make the pop-up call when the user click in an element of the body, not only the frame.
If you provide your JavaScript & HTML code, I can help you more.