I have this element on the page:
<iframe src="http://example.com" id="fa-iframe" scrolling="No" frameborder="0" style="height: 513px; width: 597px; "></iframe>
Now, I run jquery within it and try to close it...
The jquery should execute some function on the element...
I tried solutions such as this..but it didnt work:
document.getElementById('fa-iframe').style.display="none";
How do I close the iframe..while the document with the javascript is inside the iframe?
You need to manipulate the DOM of the parent window (parent). This is subject to the same origin policy.
Related
I am using WordPress and WooCommerce. When a product is added to cart, an iframe from 3rd party plugin hosted on a different url is loaded or inserted to the DOM dynamically.
<li class="klarna-checkout-wrap">
<iframe id="klarna-checkout-iframe" name="klarna-checkout-iframe" class="k-loading" scrolling="no" frameborder="0" style="height: 860px; width: 1px; min-width: 100%;" src="https://checkout-eu.playground.klarna.com/12345/checkout.html#%7B%22ORDER_URL%22%></iframe>
</li>
There is an element inside the iframe with an <div id="buy-button-next"></div>
Do you know how can I access the element inside the iframe that has an id of "buy-button-next" ?
I tried the code below but it's not working..
$('.klarna-checkout-wrap #klarna-checkout-iframe #buy-button-next').on('click', function(e) {
alert('test123');
});
Any idea is appreicated. Thanks.
You need to add your script on the page which is inside the Iframe. As it seems below is the source URL
https://checkout-eu.playground.klarna.com/12345/checkout.html#%7B%22ORDER_URL%22%
goto that page and simply below code will work.
$('#buy-button-next').on('click', function(e) {
alert('test123');
});
If you do not have access to the source URL then you can't do it.
Using Javascript in a webBrowser Control in a form, How do I switch to a iFrame
<iframe id="ContentFrame" class="contentIFrame" onload="checkComplementaryPage()" onmouseover="hoverMenu('dividers')" name="ContentFrame" src="HomeContainer.aspx" scrolling="auto" frameborder="0"></iframe><div id="footer" class="footer">
and then locate and click on an element inside that iFrame?
<div class="innerItem50L">
<input type="submit" name="btnPunch" value="punch" id="btnPunch" style="CURSOR:hand;" />
</div>
I am new to programming and am starting with c#. I know even less about Javascript...
Using the following thread as an example:
Make an event happen in child iframe to the parent window in JavaScript?
You could do the following:
$('#ContentFrame').contents().find('#btnPunch').click();
Note: The iframe's source has to be from the same domain, and contents must be loaded so you should put it after window load.
I have a div that contains the iframe, this iframe loads a URL which shows a page.
Within the iframe, i have a close button which when clicked, hides the div. But I am unable to access the div from within the iframe.
My code as below
<div class="app" id="modalOverlay" style="background-color:rgba(0,0,0,0.5);position:absolute;z-index:1;width:100%;height:100%;top: 0;left: 0;">
<div id="modalContainer" style="position:absolute;z-index:2;margin: -250px 0 0 -250px;top: 50%;left: 50%;background-color: #222;width: 500px;height: 500px;">
<a class="close" style="position:relative;top:-10px;z-index:3">Close</a>
<iframe src="http://www.local.dev/api/v1/track" frameborder="0" style="width:500px;height:500px;position:relative;top:-20px">
</iframe>
</div>
</div>
Within the iframe src view, i load a js which uses jquery
$(document).on('click','.close',function(){
$(document).closest('.app').remove();
});
Anyway to do this?
you can use:
$('#modalContainer', window.parent.document);
second parameter is the context in which to search.
$(document).on('click','.close',function(){
$('.app', window.parent.document).remove();
});
Try something like this:
$('#divtohide', window.parent.document).hide();
Or something like this:
$("#InFrameId").on('click', function() {
$('#divtohide', window.parent.document).hide();
});
EDIT: based on the recent update to your question if the frame is from a different domain, browser will flag this as XSS and you may not be able to do much. One way you can run scripts is if the server of the iframe is configured to send the X-XSS-Protection header with correct value.
This can be done with child to parent frame messaging.
Have the parent frame listen for a message.
<div id="myDiv">
<iframe src="childFrame.html" id="frame1"></iframe>
</div>
<script>
window.onmessage = function(e) {
if(e.data == "close") $("#myDiv").toggle();
}
</script>
The child frame can send a message to the parent frame.
<button onclick="parent.postMessage('close', '*');">Hide</button>
See my gist: https://gist.github.com/sfarthin/9140403
DhruvJoshi's method will have the browser flag this as a XSS attack.
Simply you can't, according to your code, I think your iframe comes from different domain, so a frame from different domain cant access to parent page.
Therefore you may consider using nodejs or maybe, you should read this: Cross domain iframe issue or a search with "crossdomain iframe" keywords will lead you to what you need.
Ok, thank you first of all his attention. I have three iframes in 3 different html documents. Organized in this way:
In iframemain.html I have:
<iframe src="iframeparent.html" width="100%" height="600">
</iframe>
In iframeparent.html I have:
<iframe src="iframeson.html" width="90%" height="350" name="_parent">
</iframe>
In iframeson.html I have:
<iframe src="http://anywebsite.com/samplepage.html" width="80%" height="300">
</iframe>
I did this because http://anywebsite.com/samplepage.html links are loaded into main window (iframemain.html), and not what I want, I wish I could capture the target and load the content iframeparent.html without afect to iframemain.html
I clarify that I have no control over the content of: http://anywebsite.com/samplepage.html, but it is annoying that your links loaded into the main window, so I would like all of those links are loaded in the same iframe or much in the iframeparent.html
Is this possible with Javascript or Jquery?. Thanks for your answers.
See if I have understood this correctly
You want to frame a page http://anywebsite.com/samplepage.html on iframemain.
That page has a bunch of links with target="_parent" or worse, "_top"
You want the page you have framed to not target iframemain but to have all links stay in that frame.
If the links target _parent, then your solution is correct. If they target _top, you would need to use a proxy on the server. It would break if they change the way they target links (using javascript or base target for example) but the idea is that you have
<iframe src="yourproxy.php?url=http://anywebsite.com/samplepage.html" width="80%" height="300"></iframe>
and in there, replace all _top and/or _parent with _self
But show some examples of the links (you can change the URL to protect your client) so we can help better
I have an iframe that looks like this:
<iframe src="http://www.google.com" height=1000 width="500" id="myiframe"></iframe>
I want to create a link so that when I click on it, the iframe on the page changes. How can I do that using jQuery? Is it related to jQuery attr?
You don't need jQuery for that. You don't even need JavaScript for that.
Give your iframe a name, and target your anchors to point to it:
Foo
Bar
Baz
<iframe name="myiframe"></iframe>
This degrades nicely for people who have JavaScript turned off.
on clicking in the link "click here" // it will take move the link to the iframe as specified....
Click Here
<iframe src="blank.html" frameborder="0" name="test" id="test" width=1200 height=800></iframe>