I'm trying to read the contents of a document that is loaded via window.open:
<!DOCTYPE html>
<html>
<body>
<button onclick="openWin()">Open "newWindow" and read its content</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("http://www.google.com/",
"myWindow", "width=400, height=400");
myWindow.opener.document.write(myWindow.document.body.innerHTML);
}
</script>
</body>
</html>
How can I read the contents of a document after loading it via window.open?
I've tried this with setTimeout function but it didn't work.
This is working :
myWindow.opener.document.write("Done!!");
You can't do that if the document you're opening in a new window is from a different domain (for example, yoursite.com opening a new window that loads google.com). This is a security restriction known as same-origin policy. More information: Same-origin policy (MDN).
Hope this clarifies things a bit for you.
It can sometimes pay to try a few things.
My isp recently added a time stamp to their login form which prevented me using my local post form with preloaded name and password.
I looked for ways of downloading their login page and copying the time stamp to my local form. This would have been easy with almost any script except JavaScript.
Frames failed as they use the X-Frame-Option set to 'Deny'.
To my surprise I was able to copy the time stamp to my local form from a pop-up window containing their form. This now works well. The only slight imperfection was having to use a fixed timeout rather than detecting pop-up page fully loaded.
Here is the disguised full solution:
<html>
<head>
<base href='https://www.isp.net'>
<title>isp</title>
</head>
<body onload="w=window.open('login'); setTimeout('document.f.time-stamp.value=w.document.forms[0].time-stamp.value; document.f.submit(); w.close()',2000)">
<form name=f action='login' method=post>
<input type=hidden name='user-name' value='my-name'>
<input type=hidden name='password' value='my-password'>
<input type=hidden name='time-stamp' value=''>
</form>
</body>
</html>
Related
Im using this code to demonstrate the concept on same domains:
Parent:
<html>
<body>
<form>
<input id="details" name="details">
<input type="button" name="choice" onClick="window.open('http://domainB.com/popuppage.html','popuppage','width=850,toolbar=1,resizable=1,scrollbars=yes,height=700,top=100,left=100');" value="Open popup">
</form>
</body>
</html>
And the popup file:
<html>
<head>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function sendValue (s){
var selvalue = s.value;
window.opener.document.getElementById('details').value = selvalue;
window.close();
}
// End -->
</script>
<form name="selectform">
<input name="details" value="">
<input type=button value="Copy input to parent opener" onClick="sendValue(this.form.details);">
</form>
</body>
</html>
This works great, but because the popup make a modification of the content of the parent page window.opener.document.getElementById('details').value = selvalue; this will not work on a crossdomain example for security reasons. I dont want to modify content on parent, i just want to communicate a value to the parent script, so i need a listener script on parent to attend for information sent from the popup on close. Is this possible? alternatives?
As Passerby suggested, postMessage (https://developer.mozilla.org/en-US/docs/DOM/window.postMessage) is the ideal solution for what you want to do. Because it doesn't work on older browsers, you'll either have to limit your stuff to newer browsers or employ hacks with iframes and the like to achieve cross-domain communication.
You could run easyXDM in the popup and have it load domainA.com in an iframe, then from that iframe you should be able to access and manipulate the other page on domainA.com that initiated the popup.
I am doing this first time. I have created an iframe on my page and I want the text from the iframe through jquery.
Here is my code :
<html>
<head><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function copyIframeContent(iframe){
var iframeContent = $(iframe).contents(); //alert(iframeContent);
//$("#result").text("Hello World");
$("#result").html(iframeContent.find('body').html);alert(iframeContent.find('body').html());
}
</script>
</head>
<body>
<iframe id="myIframe" onload="copyIframeContent(this);" name="myIframe" src="text.php"></iframe><br />
Result:<br />
<textarea id='result'></textarea>
<input type="button" value="click" id="btn" onclick="aa()">
<script type="text/javascript">
function aa(){ alert("Fdf");
alert(document.getElementById('myIframe').contentWindow.document.body.innerHTML);
}
</script>
</body>
</html>
text.php:
text to change
I tried a lot in all browsers but still this is not working.
Can anyone help me to get this content?
The contentWindow works in both FF and chrome
document.getElementById('myFrame').contentWindow.document.body
Would give you a DOM element body
You can also try something like
window.frames['myIframe'].document.body
That might do the trick for you also
You might have problems with your browsers built in security. If you run this on a local machine. There is a way to disable browsers security.
var content=$("iframe").contents().find('body').html();
alert(content);
Use .contents() to get to iFrame's DOM.
$('#myIframe').contents()
UPDATE:
In the OP:
$("#result").html(iframeContent.find('body').html);
Should say:
$("#result").html(iframeContent.find('body').html());
Doing with jquery will be a little easier:
$('Your Selector', frames['myIframe'].document)
The above example will get anything from myIframe. But the iframe MUST be from the same domain as the parent document. If not from the same domain, a security violation occurs (You can't add content from foreign sites to your page and change that content.)
If no security violation, you can do anything with the selection. For example you can use the jquery append() method to insert new html inside the iFrame, you can use the html() method to replace html or any other function that jquery/pure javascript allows.
I have two level parent-child iframe hierarchy in my HTML pages. I want to get an object of parent window document in its child document for some manipulation. I works majorly with Google Chrome.
parent.document gives 'undefined' in Google Chrome, while in Mozilla it works fine. What's the catch?
For reference, please find below the content of the three files demonstrating the issue,
First file: 'one.html'
<html>
<head>
</head>
<body>
<input type="hidden" id="one_1" name="one_1" />
<iframe id="one" name="one" src="two.html">
</body>
</html>
Second file: 'two.html'
<html>
<head>
</head>
<body>
<input type="hidden" id="two_1" name="two_1" />
<iframe id="two" name="two" src="three.html">
</body>
</html>
Third file: 'three.html'
<html>
<head>
<script type="text/javascript">
function callme() {
alert(parent.document)
alert(top.document)
}
</script>
</head>
<body>
<input type="hidden" id="three_1" name="three_1" />
<button id="click" name="click" onclick="return callme()">Click Me</button>
</body>
</html>
Assuming that 'one.html' is opened with Google Chrome, when I click on the 'Click Me' button, two successive alert boxes appears with 'undefined' value. When I open 'one.html' in Mozilla, it gives two 'objectHTMLDocument' valued alert boxes appears.
Please find below the console messages while clicking on 'Click Me' button,
Unsafe JavaScript attempt to access frame with URL file:///C:/Users/user/Desktop/two.html from frame with URL file:///C:/Users/user/Desktop/three.html. Domains, protocols and ports must match.
three.html:6
callme three.html:6
onclick three.html:13
Unsafe JavaScript attempt to access frame with URL file:///C:/Users/user/Desktop/one.html from frame with URL file:///C:/Users/user/Desktop/three.html. Domains, protocols and ports must match.
three.html:7
callme three.html:7
onclick three.html:13
Thanks in advance.
I would inject from top-down as opposed to accessing bottom-up. I would set a variable in an iFrame by selecting it and storing it into a variable like so:
var frame = document.getElementById('one');
And then inject a reference to the parent:
frame.contentWindow.frame_parent_reference = window;
And then perform this in the next child iFrame replacing "one" with "two". That way, by third.html, we don't ask for parent or top, but can do the following:
alert(frame_parent_reference.document);
alert(frame_parent_reference.frame_parent_reference.document);
Perhaps not super elegant but it definitely gives you a lot of control (and you can check if the custom reference exists for security).
Good luck!
<html>
<head>
<script type="text/javascript">
function show_confirm(){
var r=confirm("Hello or Goodbye?");
if (r==true){
alert("Hello");
window.location.replace("http://www.google.com/");
} else {
alert("Goodbye");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
</body>
</html>
I'm learning JavaScript, and I'm using W3School's Tryit Editor, and this code wasn't working like I hoped. I want it to redirect me to google after someone hits 'OK' twice, but it doesn't seem to work. Can someone help me out?
The problem is that the Try-It Editor is using an IFrame. When I try it in Chrome and open up my developer console, I get the following error:
Refused to display document because display forbidden by X-Frame-Options.
This is because what your code is trying to do is change the location of the current frame, not the entire page.
You can do one of three things:
Try your HTML outside of an IFrame and you should get it to work then.
Try using window.top.location.replace("http://www.google.com/"); instead of window.location
If you must change the location of an iframe with JavaScript, you'll have to either do so outside of the frame or make sure it stays within the same domain as the parent document. (You'll notice that window.location.replace("http://www.w3schools.com") works just fine.)
I'm having trouble with creating a web page with following features:
When users visit my page, their address bar will display ONLY URLs having no accompanied ID such as http://127.0.0.1/client
Whenever they REFRESH the page, real requested URLs will be attached with IDs. For example: http://127.0.0.1/client?id=3
Previously, I tried to use hidden input tags, but it's fruitless. Any idea?
My mark up is below
<html>
<head>
<meta http-equiv='refresh' content='1,url=/client'>
</head>
<body onload="JavaScript:setTimeout('location.reload(true);',0);">
<input type="hidden" name="id" value="3" />
</body>
</html>
You can hijack page refresh with something that POSTs to your page.
You could use pushState to change the url on load like:
function updateURL (){
window.history.pushState(null, null, "?id=3")
}
window.onload=updateURL;
You could also accomplish something similar using location.hash as pushState is not supported on some old browsers.