I have got an iframe that displays a form from an external site,once the form is submitted it is redirected to another page that has got a thankyou message.Is it posiible to know from the iframe if the location of src webpage has changed? i hope im making some sense...
i got this code which will do the job for me from some website,its working while im in their website but when i try to do it locally im getting Access Denied javascript error....
<html>
<body>
<script language="JavaScript">
function myLocation() {
alert(document.all.myFrame.contentWindow.location);
}
</script>
<iframe id="myFrame" src="http://www.java2s.com" style="width:200;">
</iframe>
<br>
<button onclick="myLocation();">Location of Frame</button>
</body>
</html>
thank you
You may want to use the onLoad event, as in the following example:
<iframe src="http://www.google.com/" onLoad="alert('Test');"></iframe>
The alert will pop-up whenever the location within the iframe has changed. The only problem with this technique is that it may not work with some older browsers like IE5 and early Opera. (Source)
UPDATE:
Further to your edit, you are getting the "Access Denied" error because you cannot access the contentWindow.location of a website that is not within the same domain of the parent window. While this is unfortunate for your genuine requirement, this is considered a security restriction to prevent cross-site scripting.
function chkCounter(counterValue) {
var tmp=document.getElementById('txtCounter').value;
document.getElementById('txtCounter').value=tmp+counterValue;
if(document.getElementById('txtCounter').value>1)
{
document.getElementById("btnClose").disabled = false;
}
}
<input align="middle" type="button" onClick="self.close();" value="CLOSE" disabled="true" id="btnClose">
<input type="hidden" id="txtCounter">
Related
I'm trying to send a click event to an object/iframe embedded with a cross-domain url, which I also have control over and can add code onto so this should be possible. The reason why I need to do this is because the html page is not running on a conventional web browser but an ar app, which treated the click events kind of differently.
For example, I have tried to do something following the advices from Cross domain iframe issue
<body>
</div>
<object id="target" type="text/html" data="www.someurl.com" width="850px" height="820px" style="overflow:auto" class="realityInteraction" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin">
</object>
</div>
<script>
// Main page:
window.onmessage = function(event) {
alert(event.data);
};
document.getElementById('target').contentWindow.postMessage('','*');
</script>
And on the remote url www.someurl.com:
<script>
window.onmessage = function(event) {
event.source.postMessage(document.body.innerHTML, event.origin);
</script>
It really looks promising but it just does not went through. Maybe I have get something wrong or I have misunderstood some of it. And also the console keep yelling Use of window.alert is not allowed in a sandboxed frame when the allow-modals flag is not set even though I have clearly labeled the iframe/object with the allow-modals flag.
Any assistance is greatly appreciated.
I have been trying to access data from an iframe. I am working on codeigniter. I have spent my whole day searching for the solution, but no luck. I am not an expert in javascript, so it is becoming more difficult to me. Please have a look at my code.
home-upload-dialog.php view file
<div id="popup-contents">
<iframe id="upload-frame" frameborder="0" scrolling="no" height="200" width="100%" src="<?php echo site_url('home/upload_area/' . $_REQUEST['count']);?>"></iframe>
</div>
<input type="button" value="click me" onclick="run()">
<script>
run() {
var iframedoc = document.getElementsByTagName('iframe')[0].contentWindow.document;
var inputs = iframedoc.getElementById('text');
console.log(inputs);
}
</script>
home.php controller
upload_area() {
$data['count'] = $count;
$this->load->view('upload-area', $data);
}
upload-area.php view file
<!DOCTYPE html>
<html>
<head>
<title>Title here</title>
</head>
<body>
<input type="text" name="text" id="text" value="someValue">
</body>
</html>
I get the error saying Uncaught TypeError: Cannot read property 'contentWindow' of undefined
There might be things I overlooked. Any help would be appreciated !
I also tried $('iframe').contents().find('#text').html(); but no luck.
There are already many answers to your questions, google "access DOM inside iframe" for several solutions, here is one.
In general remember that you cannot access the iframe data if the iframe is loaded on another domain for security reasons (otherwise imagine the "Like" widget from Facebook, you could load it and then steal the authorization cookie of the users visiting your website...)
EDIT: Note that the security limitation above includes funny situations like your website is loaded from "www.domain.com/page.php" and your iframe from "domain.com/iframe.php", so check that out.
I'm trying to change the value of a text box within iframe.
I have tried using GetElementById in every way i could find and nothing seems to work.
I found a alternative to iframe by using the Object data tag but it has the same problem.
My code more or less, I changed it a bit for presentation:
<html>
<head>
<title>None</title>
</head>
<body>
<script type="text/javascript">
function changeValue() {
var textBox = document.getElementById('userName');
textBox = "hello!";
}
</script>
<iframe id="myFrame" src="http://www.website.com"></iframe>
<input type="button" onclick="changeValue()" value="Submit">
</body>
</html>
This is not possible for security reasons.
If you had access, you would be able to load, say facebook.com in an iframe on your website and extract user details with JavaScript.
Try something along the lines of
document
.getElementById('myFrame')
.contentWindow
.document
.getElementById('userName')
.value='hello';
As the others pointed out, this will only work if the page inside the iframe is on the same domain.
I have a situation where I have web apps on two different servers, where App1 contains App2 in an IFrame. Any links in App2 can have target="_parent" attribute, which allow those links to open in the top window. However, I can't find any way to get the same behavior in Javascript. I found this page, which claims that the child frame can call javascript on the parent frame using parent.foo(), but that doesn't seem to work in IE8 or FF3.5. I found this SO question which explains how this security model works. But it seems odd that I can't do in Javascript what I can do with a simple <a> tag. Is there any workaround to this at all? I know about window.postMessage, but (as far as I know) this only works in Firefox.
Example
server1/test.html
<html>
<head>
<script type="text/javascript">
function myCallback(foo) {
alert(foo);
}
</script>
</head>
<body>
<iframe src="http://server2/test2.htm" width="400" height="150"></iframe>
</body></html>
server2/test2.html
<html><body>
<script>
function clickit() {
parent.document.location = "http://www.google.com"; //not allowed
parent.myCallback("http://www.google.com"); //not allowed
}
</script>
<p>This should be in an iFrame!</p>
<p>normal link (works)</p>
<p>javascript link</p>
</body></html>
OK I did more investigation, and it appears that postMessage works in all modern browsers, even IE (with the caveat that IE has a slightly different way of doing it). Here's how I got it to work (tested on WinXP in IE8, FF3.5, Chrome 3.0, Safari 4 beta, Opera 9.64):
server1/test.html
<html>
<head>
<script type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
window.attachEvent("onmessage", receiveMessage);
else
window.addEventListener("message", receiveMessage, false);
function receiveMessage(e) {
if(e.origin == "http://server2") //important for security
if(e.data.indexOf('redirect:') == 0)
document.location = e.data.substr(9);
}
</script>
</head>
<body>
<iframe src="http://server2/test2.htm" width="400" height="150"></iframe>
</body>
</html>
server2/test2.htm
<html><body>
<script>
function clickit() {
parent.postMessage('redirect:http://www.google.com', 'http://server1');
}
</script>
<p>This should be in an iFrame!</p>
<p>normal link</p>
<p>javascript link</p>
</body></html>
A simple thing you can do is:
execute following from JavaScript code of iframe page
top.location = "https://www.google.co.in/";
this will change the location of window's URL to https://www.google.co.in/.
One more thing -This strategy can also be useful when you do not want that any one can inframe your site
just write the above code in document ready part.
No, and for good reason. If you need this, then you must run all communication through one of the two servers; for example, have server1 act as as a proxy for all requests for "server2/test2.html".
If both parent and iframe are on subdomains under the same domain, you may be able to do something with the document.domain property. If both body and iframe are treated as being from the same origin, changing the location should be possible; I haven't tried this myself. Some reading here
If the frames are on the same domain, you should be able to access the parent frame. Otherwise no, it's a security issue.
The only workaround that springs to mind would be to use AJAX to update a file on each of the servers, then check the contents of the opposite file server-side. You could do the same thing using a single database, if you allow connections from external domains.
This is all kind of overkill though, when you could simply pop-up a link in the frame and tell users to click it to continue.
I have the following code in my page
<html>
<head>
<title>testpage</title>
<script language = 'javascript'>function fchange(){alert(document.getElementById("ifrm").value);</script>
</head>
<body>
<iframe id = 'ifrm' src = 'http://www.google.com' width = '700' height='500'></iframe><input type='button' onclick = 'fchange()' value = 'clickhere'>
</body>
</html>
From this I click the button and an alert box dispalys undefined. But I need the content or the source of the page ('http://www.google.com'). Please help me to do this.
Thanks in advance...
You can't do this, as it breaks the same-origin policy.
If both pages are on the same domain then you can with do what #Joel suggests, or the slightly more old fashioned:
window.frames['ifrm'].document.body.innerHTML;
You'll need <iframe name="ifrm" ...> for this to work.
If you want the source of the iframe, you would need to access the document object of the iframe.
function fchange()
{
alert(document.getElementById("ifrm").contentWindow.document.body.innerHTML);
}
As mentioned by others, you cannot get the source of an iframe which points to a page outside your domain.
You need to have back-end script for that. I think that's the only way. AJAX would not allow to make a request to other domains for security reasons.