Develop Reference

Clicking element inside an iframe using jquery or javascript maybe AJAX

After going through numerous threads on numerous forums none of them come close to a solution to what I want to accomplish.
Here is want I want to accomplish:
I have a page on an iframe and I want to click a on a div tag inside that Iframe.How do I go about it .i have seen scripts that have mouse event emulator but I do not know how to use them.
Site 1 = http://site1.com/page.html
Site 2 = http://site2.com/abc.html
code for site 2:
Code:
<div>
<div>
<div attribute="text" onClick="somefnc();">
james bond
</div>
</div>
</div>
code for site 1:
Code:
<iframe src="http://site2.com/abc.html></iframe>
What I would like to do is to have a script that automatically click on james bond (the text within the div) bearing in mind I have no control over http://site2.com/abc.html
Preferably list the methods one could accomplish this and where can i learn such type "DOM" (javascript mainly dealing with mouse events) for free.
Any references are highly appreciated.A baby step walk through the code is highly appreciated.
I am noob in this area.
What I a have tried so far:
try 1: javascript
.click();
error of try 1:cross domain issues
try 2: mouse emulation
error of try 2: noobieness code to complex for me
please help.
guessing solutions
mouse emulation like scripts
some neat jquery code
AJAX ,PHP maybe

Unfortunately since you are dealing with two sites on different domains, I don't think it's possible.
Mouse Emulator
Mouse emulator scripts probably dispatch a click event on the page, but unfortunately dispatchEvent won't work for iframes on different domains. Can you post a link or code what you tried with mouse emulation?
If you tried:
document.elementFromPoint(x, y).click();
Based on this Stack Overflow post, the click won't work on a cross-domain iframe:
How to simulate a click by using x,y coordinates in JavaScript?
Quoted: "For instance, it can't be used to trick a cross-domain iframe document into thinking it was clicked."
If you tried:
el.dispatchEvent("click");
Then you need to get the element el somehow from within the iframe contents. Since the iframe is in another domain, you will be blocked from trying to get the iframe contents (using either JQuery or DOM).
var doc = iframe.contentDocument || iframe.contentWindow.document; // security error due to cross-domain
doc.getElement ...
(By the way, it would be easier to use jQuery to get the element since site2's code doesn't have an id on the element, and DOM doesn't provide an easy way to get elements besides by id or class)
JQuery
JQuery provides a function to get the contents of an iframe. Assuming that would work, then you could find the element in the iframe contents and trigger a click on the element. Unfortunately this will only work if the iframe is on the same domain.
var el = $("iframe").contents().find("div[attribute='text']"); // security error due to cross-domain
el.trigger("click");
AJAX, PHP
I can't think of a way to click something through AJAX or PHP. Using AJAX, you could potentially make a GET request to site2 to retrieve the contents of abc.html and insert that on your page, but again, you would have cross-domain issues performing a GET request to another domain from the browser. Instead, you could make a server-side request to get the abc.html (using PHP or other server side code), then you wouldn't have the cross-domain issue. You'd still need to request any css and whatever javascript file where the somefnc() function lives and whatever else it depends on, then somehow inject all that on your page and you still wouldn't actually be interacting with site2, just copies of its files. This would be hacky and tricky to get working, and it really depends on what site2's somefunc() does.
Other options:
Depending on what you need to do and what site2's somefnc() does, you could try to duplicate the same functionality instead of doing it through clicking on an iframe.
If you can work with site2, you could try postMessage to send a message to site2:
http://javascript.info/tutorial/cross-window-messaging-with-postmessage

accessing dynamically created iframe contents/elements like textbox, label from javascript

i am dynamically creating an iframe then calling aspx pages into it, what i need to do is access the elements of the iframe page and change its ( only specific element like text box or label etc.) value without reloading the whole page.
the first task is to access the elements of pages being called into my iframe, i am trying to acess them with javascript but no progress so far.
i have tried various solution like this :
How to get the body's content of an iframe in Javascript?

Actually, the answer you've attached should work. But note that this is only true in case that your parent page and the iframe URL are loaded from the same host (domain name). if not, you will get an error message from your browser stating that this operation is blocked.
If you are trying to show another site through and iframe and then manipulate it then you have to give up this dream because it can't happen that simply.
I can think of one solution for you, not sure about the legality of it, and it is kind of a pain in the ass.
You can open up a server side script on your own domain that receive a URL, fetches it's content and then echo it. This way you get the original desired page contents but you have it on your own host so you can manipulate it as mention in the attached answer.
Note that it's not easy at all to control from there, because once a user clicks a link in the page his out of your control again, so you may want to change all the page links to the address of your server side script and attach the original link to let it fetch it for you. Probably a lot more issues that i haven't thought about.
PHP Example of such a function:
function fetchURL() {
$urlToFetch = urldecode($_GET['url']);
$contents = file_get_contents($urlToFetch);
// maybe here manipulate links and other stuff throw str_replace or,
// if you want more control over it, you may want to load it in to some DOM parser class,
// manipulate it and extract the result back to a string variable.
echo $contents;
}
Note that in that case you should load the script through the iframe with the desired URL as a query string like that:
$yourDesiredURL = 'http://www.example.com';
echo '<iframe src="http://www.yourdomain.com/your/script/path.php?url=' . urlencode($yourDesiredURL) . '"></iframe>';
*************** EDIT *****************
Actually now i see that you tagged .NET, so my example code is probably not the best for you, but since it's very short and simple it wouldn't be any problem converting it.
Again, i want to say that iv'e never tried it and it's probably over your (and my) head, maybe you better give up on the idea.

Stop an embedded iframe from redirecting

Is there a way to stop an embedded iframe from being clickable or make the entire iframe clickable? I want the iframe to pull the data, but I don't want visitors to be able to click the iframe and be redirected from only one spot on the iframe.
Is that possible? Here's an example of the iframe:
<iframe src="http://www.indiegogo.com/project/157203/widget?escape=false" width="224px" height="429px" frameborder="0" scrolling="no"></iframe>
http://jsfiddle.net/qX4fu/

As your iframe is obviously served by another domain, standard solutions cannot be used. You can't read or modify the iframe nor its document.
But you can put an invisible div over it like this : http://jsfiddle.net/dystroy/Afg3K/
<div id=a></div>
#a{
position:fixed;
top:0;
left:0;
width:224px;
height:429px;
}​
But most of the times, those things are forbidden by the iframe inclusion contract. Look at your agreement before you do it.

It is possible, though I would not recommend it.
Messing with default browser behavior such as anchor tag clicks will generally frustrate a user and prevent them from returning to your page.
Furthermore, as dystroy stated in his answer, the legal strings attached to dropping iframes on your page usually explicitly forbids this kind of behavior.
That being said, returning false from an event handler will prevent the browser from receiving the event:
document.getElementById('yourFrame').contentWindow.document.body.onclick = function () {
return false;
};
It is worth saying that this will not work if the iframe is in a different domain than where the script is running from. If that is the case, you will need to construct a transparent overlay div that swallows the click events and absolutely position it over the iframe.
Here is a fiddle demonstrating both approaches: http://jsfiddle.net/qX4fu/1/

If you are using HTML5 I would suggest making use of the new "sandbox" property BUT it is not yet compatible with all the browsers. http://www.w3schools.com/tags/att_iframe_sandbox.asp
In my case I just added "allow-forms" and "allow-scripts" as the sandbox property values and the embedded site no longer redirect and still can run JavaScript
ex: <iframe sandbox="allow-forms allow-scripts" ... /></iframe>
If anyone knows any Cons to using this approach I would love to know about it.
Someone else with same answer: https://stackoverflow.com/a/9880360/1404129 (I ran into this answer later)

How to stop page load in html static page

Is there in HTML (javascript) or other static html tech
can:
Stop page loading (if browser does not download yet)
Stop page rendering (from where the code placed)
Stop javascript executed (from where the code placed)
Simply put, is there a code like
<script>window.StopWhateverBelow()</script>
To let browser totally ignore whatever below the code.
UPDATE
I understand the browser may already download the whole thing. What I want is, from the code, page should stopped, for example: if I put the code just after <body> visitor should see blank page, if I put the code in middle of the page, page should be just half like you pressed ESC
ANSWER
As bukko suggested, comments done the trick. But not full, just half
If you put <!-- in html page, the rest will be ignored. And in Javascript
document.write('<!--');
Done the trick.
For about make sense:
Here is how this code make sense: when you page load some offpage script, the script is dynamic. When the script code found something wrong (or match some condition), you have one more option to stop the page from rendering, loading, download...

You could do window.stop(); for most browsers besides Internet Explorer. For IE, I had to use document.execCommand('Stop');

If you already have html comments on your page, #bukko's solution doesn't fully work. Stuff after the html comment will get rendered normally.
Something else to try is:
document.write('<script type="text/undefined">')
The rest of the document gets interpreted as part of the script tag, and because the script isn't text/javascript, it gets ignored.
Worked for me, thought I'd share it.
Edit
I've seen the script trick not work in Chrome.
This does work, but I have not done extensive browser testing:
document.write('<style type="text/undefined">')

window.stop(); //works in all browsers but IE
if ($.browser.msie) {document.execCommand("Stop");}; //works in IE,
document.execCommand works in IE, however it does stop some of FF, NS and some other browsers' functions. Like displaying GIF's animation for example. Using "if browser is IE" makes these two codes work perfectly in all browsers.

Well, there is:
<!--
terminated by
-->
for HTML, but scripts will ignore this.

What you are asking makes no logical sense. Simply for two reasons:
Data is ALREADY sent to the user (HTML / JS) so even tho if you COULD hide content, the data would sitll be there for a user to see (if they view source for instance).
Why would you stop 'execution' of a page? It loads simple html structure and reults in a visual display, you should focus on the server site (php for instance) to hide or not send the content in the first place.
If you want to visually hide elements tho, you could use CSS styles (hide divs or the like) with simply adding style="display:none;" to a div like so:
<div style="display:none;">
This text will be downloaded by the user, but hidden from view due to CSS inline style
</div>
If you want to add commenting (thats just for your reference), then use comment formatting:
<!-- this is a comment and will not show up to a user -->
Reference for comments: http://htmlhelp.com/reference/wilbur/misc/comment.html

put window.Stop() wherever you want to stop the page from getting renderred

You could also hide the body like that:
var style = document.createElement("style");
style.innerHTML="body { display:none !important; }";
document.getElementsByTagName("HEAD")[0].appendChild(style);

HTML is static content so the server reads whatever you have written in the file unless you comment it out. For a dynamic file like what you are asking for you need to use php which can do this type of thing.

Just not much related to the question, but I thought it may be useful for some persons. If you want to jump to other page during page loading use window.location = "somepage.html"; or you can redirect users to the previous page: window.history.go(-1); Useful in JavaScript conditional statements

If you are using ASP or PHP, HTTP protocol automatically stops but HTTPS protocol don't stop automatically.
To stop it use:
In ASP:
dim r= accept.secure.protocol
r.onload=window.callback('c')
//to firefox,opera,safari
new clientObject(r).access()
// to chrome,ie
forEachElement(a==null);
PHP code:
$a.window ;
All this scripts sends the browserstring "elementcast" by post method

The stop methods can break things that have already started to load.
If you want to load everything above a certain point and skip everything below a certain point:
<p>Everything works above this point.</p>
<pre style="display: none !important;">
<p>As long as the PRE tag remains open,
nothing works below this point</p>
<script>document.write('Nope');

Any univeral way to place a common menu in iframe to load from a single location

My web site has a common horizontal menu and I'd like to put this into a single html file so I only need to change it in one place.
My solution is to put the menu into an iframe and have a DIV id=menu in the main page. In the menuFrame html I have an onload with this:
<script language="JavaScript">
function doLoad() {
window.parent.document.getElementById("menu").innerHTML = document.body.innerHTML;
}
</script>
This works fine in IE, Safary, Mozilla but not in Chrome.
Any ideas?

For various reasons relating to usability and browser support; the better choice is pretty much always to not use an iframe for this; but rather include the menu in the text of the page using a server-side language like PHP or similar.
If, as occasionally happens, your host doesn't support PHP, it's time to switch hosting services.
As for the code itself, it's pretty simple:
<?php include '/path/to/menu.html' ?>

iframe is a bad solution.
Does your server support serverside includes (SSI)
<!--#include virtual="menu.html" -->