Click over an iFrame by clicking dynamically on certain coordinates - javascript

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.

Related

How to handle eventListener for iframe in html?

I have added the iframe code in the Html code which is the default iframe tag of the Dialogflow WebDemo. When you go through the picture which I have uploaded that indicates that when the user types the message and presses enter then automatically it display other response. What I need is when the user presses the enter then I should write the function in the script.
Here is the code of iframe tag in the HTML -
<iframe allow="microphone;" id="myFrame" width="350" height="430" src="dialogflow_bot_link"></iframe>
Try the following
$(document).ready(function(){
$("iframe").load(function(){
$(this).contents().on("keyup", function(){
// handle 'keyup' event
});
});
});
iframe tag embeds a separate webpage into the parent webpage. So we use load() to load the contents of the iframe and contents() to get the immediate children within the iframe.

Cross domain iframe control/loading with Jquery/CSS

I need to embed my website onto another website, but remove the header and footer from my website and essentially just show the content.
The iframe gets built fine and loads the content into the page, and using an onload event, I've set the visibility so that the 'flashing' is removed on load. Separately in a JS file, I'm then removing the header and footer on document ready, which seems to remove them prior to the visibility kicking in. On the first load, everything works fine. When you navigate in the iframe, clicking a link, for instance, the window reloads with the correct information, except for a few seconds, it loads the header and footer and the removes them.
Ideally, the header and footer should never be shown at all.
The onload event is inline JS with the iframe, whilst the document ready is loaded when the iframe is loaded.
The document ready code (external Js)
if (window.location !== window.parent.location) {
setTimeout(function () {
$('.header').remove();
$('.footer').remove();
}, 500);
}
and the code to be embedded onto the separate domain/website:
<script>
function loadIframe() {
var ifr = document.getElementById("mySite");
ifr.style.height = '75vh';
}
</script>
<iframe style="visibility:hidden;" id="mySite" onload="loadIframe()" class="catalog-frame" src="http://xxxxxxx.com/about" width="100%">
</iframe>
Essentially, and perhaps the easiest way to manage this would be to, on change of the URL inside the iframe, hide the contents, then onload, show them again, but I'm having trouble detecting whether the URL inside the iframe is about to change/changing, to hide the content/hide the iframe.
As I have access to the actual contents being loaded into the iframe, is there actually a simpler solution here, although I will not have control over the parent domain?
As you mentioned you have no control on parent, so in my opinion you can do the following:
Add a script tag in your document's head as following:
if (window.location !== window.parent.location) {
$("body").css("display", "none");
//$("loading-pic").css("display", "block");
}
Then at the bottom of you body, add the following script for the function on ready function:
$( document ).ready(function() {
$('.header').remove();
$('.footer').remove();
//$("loading-pic").css("display", "none");
$("body").css("display", "block");
});
What should happen this way is: Whenever you will click any link on iFrame, nothing will be shown, and when the document would be ready, our last script will remove header and footer and then display the body.
You can also show a loading-pic while your content is being loaded.
Alternatively, you use a variable to store whether the current session is in iFrame or on a separate window, and send it as GET or POST with your each link and remove the header and footer from server side if required.

How to execute a jQuery function on click of an anchor tag which is placed inside an Iframe

I have a web page in my application where I have an iframe loaded on the Page load.
The iframe displays a custom document which is created in our application. The iframe name is generated on the fly and the contents is loaded by a custom Javascript framework.
The document has two main vertical sections.
The first vertical section has page list which is displayed to the user so that user can navigate to nth page.
<iframe id="xyz15031550Iframe0" name="xyz15031550Iframe0" scrolling="no" src="/displaydocument/2339389/15031550?doc=100" style="height: 989px;" width="1277px" height="963px" frameborder="0">
<div class="containerFull">
<div class="allPages" id="allPages">
<a class="pagenumber_001" href="/document/2339389/15031550">Page 1</a>
<a class="pagenumber_002" href="/document/2339389/15031550">Page 2</a>
<a class="pagenumber_003" href="/document/2339389/15031550">Page 3</a>
</div>
<div id="pagesArea">
<div class="docPage" id="page_body_001">
<div id="docPageSection-001-1">
PAGE CONTENT
</div>
</div>
</div>
</div>
</iframe>
On page load, The iframe will be displaying the page 1.
By clicking the anchor tag, user can navigate to any page. On click of the anchor tag, the iframe is reloaded with the page details which is sent to back end.
Since some of the pages were bigger in width and user doesn't want the horizontal scroll to be present, I was adjusting the width of the iframe container and the two divs so to make them appear properly on the window.
`
<script src="adjust_doc_view.js"></script>
// the above script contains a jQuery function called updateView which basically
// has css related jQuery statements.
jQuery(window).on('load', function () {
setTimeout(updateView, 100); // timeout is used to wait for the iframe to load completely
});
`
The Issue which I am facing is the updateView is triggered only once on the page load. On all subsequent reload of Iframe, the updateView is not called. That is because I am not loading the whole page. I have other divs which are above the iframe which are constant. Let me know how to trigger updateView on every reload of iframe contents.
I tried adding the onclick function on anchor click event, but it works only once. I am not sure why.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
jQuery(window).on('load', function () {
// use setTimeout() to execute
// Setting the timeout to zero as no delay is experienced in this page.
setTimeout(updateView, 0);
jQuery("div[id^='artifactDiv']").find("iframe[id^='xyz']").contents().find("a[class^='pagenumber']").on('click', function() {
setTimeout(updateView, 1000);
});
jQuery("div[id^='artifactDiv']").find("iframe[id^='xyz']").contents().find("div[id^='docPageSection']").on('load', function() {
setTimeout(updateView, 1000);
});
});
Please help me out here. Please correct me if I am doing something wrong.
Thanks in advance.
How about adding the onload attribute to your iframe and calling updateView() from there?
<iframe onload="setTimeout(function() { updateView(); }, 1000);" id="xyz15031550Iframe0" name="xyz15031550Iframe0" scrolling="no" src="/displaydocument/2339389/15031550?doc=100" style="height: 989px;" width="1277px" height="963px" frameborder="0"></iframe>
You could use the ajaxComplete inside the iframe to trigger your update:
$(function() {
// iframe in main page
$('iframe').on('load', function() {
updateView()// first load update
// reference to window and document inside frame
var win = this.contentWindow || this,
doc = this.contentDocument || this.contentWindow.document;
// have to use iframe version of jQuery
win.$(doc).ajaxComplete(function(event, xhr, settings) {
// fires every time an ajax request completes in iframe
updateView()
});
});
});
DEMO

Detect clicks of iframe elements

I have an iframe with the id=phramecomp which contains several elements such as links and button.Let us suppose i have a hyperlink inside iframe with the id=donuts.I want to set a click event for that hyperlink.How do i achieve that ?
This might be duplication of many questions but still anyone could tell me how to do this one ?
Note:
iframe is on other php file by the name orderonlinelist.php
I have included this iframe inside orderonline.php file and i am writing my click function here.
<iframe src="http://localhost/orderonline_list.php" name="phramecomp" id="phramecomp" frameborder="0" scrolling="yes" ></iframe>
This is what i have included in my orderonline.php file.
you can detect click events inside iframe
Lets suppose you an iframe having id="Myframe" and a image in you iframe having id "Myimage"
so for detecting click events inside Myframe in image Myimage you can
$('#Myframe').loads(function()
{
var frame=$('#Myframe').contents();
frame.find('#Myimage').click(function(){
//do anything
});
});

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.

Categories