Trigger Click Inside an iframe - javascript

I have an iFrame and there is a anchor tag inside it with target="_blank". (<a href='#' target='_blank'>Link</a>)
What I want is when the page loads, the <a> tag is clicked automatically. I have tried several ways to achieve this with no luck yet.
One more thing, I can only change the code inside of the iFrame. The code of the iFrame is not in my hand.

Because of Same Origin Policy [https://en.wikipedia.org/wiki/Same-origin_policy] browsers won't allow you do this UNLESS the iFrame and the parent page are on the same domain. You may have to try an alternative solution that doesn't involve an iFrame. A good reference to this issue is: https://stackoverflow.com/a/3076648/3188771

Related

Using Jump Links from Parent Page to an Iframe

I have a parent page that contains an iFrame. The anchors have that have a respective The anchors are outside of the iframe but I want them to be able to work as page jump links.
I've tried adding and targeting the iframe but it still does not work for me.
Any suggestions or recommendations?
In order to target an element inside of the iframe, you'll want to use Javascript and target it like so:
function findText() {
var frame = document.getElementById('iframe').contentWindow;
frame.scrollTo(0,frame.document.getElementById('suchen').offsetTop);
}
Then your markup will be something like this:
<iframe src="http://fiddle.jshell.net/pkvhw/2/show/" id="iframe"></iframe>
Find Text
Where iframe is the id of the iframe on your page, and suchen is the id of the element you want to find within the iframe.
Here is a fiddle of it in action: http://jsfiddle.net/vs9xhs0o/
Note: You will run into issues when trying to use this going across domains. Most sites will not allow you to make cross-domain requests like this, so make sure you have control over the site you are viewing through the iframe.

Javascript/JQuery prevent navigation totally inside an iFrame

I have a same domain page loaded inside an iframe (using sandbox attribute). I use the following code to prevent clicks (and all other elements) from navigating away form the page:
$('#preview_frame').contents().find('body *').off('click').click(
function(event){
event.stopPropagation();
event.preventDefault();
}
);
However it seems that other Javascript on the page is redirecting the navigation via window.location.href or window.location.replace.
I cannot change the code of the pages inside the iframe as they are proxied from other sites.
I tried using the iframe unload event without success.
I need to disable the ability to navigate inside the iframe no matter what/how it is done. I am not talking about top parent navigation which can be disabled with the sandbox attribute, I am talking about the navigation INSIDE the iframe itself.
Is it possible to accomplish that?
Your code seems correct. Remove the sandbox attribute if the page inside iframe is from same domain. Hope it will solve the problem.
Sandbox attribute always treats contents as unique origin.

Auto-click button in div on-load

I have a page where I modded an app to prepopulate a number of fields. I would like to automatically have the 'submit' button be pressed/submitted when the page loads. I have tried things like:
<script type="text/javascript">
function autoclick() {
document.getElementById('buttonid').click();
}
</script>
with
<body onload="autoclick()">
But it does not work.
Any advice would be greatly appreciated!
Thanks
(It is the iframe on this site: http://abraxas.pw)
I see that your iframe is in the same domain and hence it will possible for you as the cross-domain security may not apply.
Give your iframe an id. And then:
document.getElementById('iframeName').contentWindow.document.getElementById("buttonid").click()
More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting
Make sure that the DOM is fully loaded before you fire your Javascript. Wrap this code into body load or iframe load.
Update:
If the iframe is in the same domain and is in your control, you don't need to do all this. Just fire the click from domloaded of jQuery, or place your code at the end (just before body ends). It will work.
Seeing your code, you have defined the function in the head and are calling it at body load. Place the function and the call at the end of the body.
You cannot do it in iframe for security reasons: http://pipwerks.com/2008/11/30/iframes-and-cross-domain-security-part-2/
Content coming from different domain in iframe can't be controlled in your page using javascript.
Browser treats iframe as a different window so you've no access over it. it's something like trying to access content of different window open in your browser from your own window(which is obviously not possible)

Inject Code into an iFrame to Hide a Specific Element

I am attempting to hide an element loaded in an iFrame using CSS/jQuery/Javascript. The iFrame content is located on a different domain. I am trying to hide a button on the page loaded inside the iFrame. The buttons HTML is:
<a href="/Communication" id="lbtnMessage" class="bsrpBlueButtonLink">
<div class="NavButtonMess">
<span>Messages</span>
</div>
</a>
I have read mixed answers around the Internet on whether or not this is possible. I just need to be able to hide this block of code in the iFrame source. I this at all possible?
One possible solution is to use postMessage, obviously you need to control both domains.
This jquery plugin handles it pretty well : http://benalman.com/projects/jquery-postmessage-plugin/
If you don't control both domains then, due to security this is impossible. All you can do, is resizing / hiding the iframe.

How to make javascript that'll click automatically inside iframe's link?

Is it possible ?
I've made on page with iframe, I want a script that'll click automatically inside in one iframe's link.
But I also want that script to detect half link, I mean the link which is in iframe changes everytime, but the first part of the link doesnt change, so the javascript should detect half link which doesnt change and redirect to it...
Why don't you write a "client" library and import it within iFrame. This library listen to a message from HTML5 postMessage call with certain attribute and react appropriately. Since you have access to the parent object through the event object (or window.parent), you can also send response back with the result. This way, it doesn't matter if it's cross-domain and as long as this library exists, you can communicate back-and-forth and even has the iFrame initiate if you write it properly.
I can't share the code with you since it's our proprietary library, but that's part of the idea.
If the content of your iframe is from a different domain, you can't. Allowing this would be a major security concern.
If your iframe content is in the same domain, then you can access the iframe content through its contentWindow property. You can then work with your iframe link the same way you would if the link was in the main page.

Categories