javascript manipulate a child window from his parent - javascript

I am currently trying to manipulate a child window with javascript written in its parent. So far I have this:
<!doctype html />
<html>
<head>
<script type="text/javascript">
var otherW;
function open_win() {
otherW = window.open("https://www.youtube.com/", "otherW", "width=500, height=500, resizable");
setTimeout("delay()", 5000);
}
function delay() {
otherW.moveTo(20, 50);
}
</script>
<title>Parent</title>
</head>
<body>
<input type="button" onclick="open_win()" />
</body>
</html>
For some reason it doesn't work. Is it possible at all to manipulate a child window when another website is loaded in it. The code above works fine when I pass an empty string instead of the youtube url.
What I was trying to do at the very beginning was to create a script in the parent window, the script was supposed to open a specific site in a new child window when a button was clicked. Then using a reference to the new window, I was supposed to set values to some input type="text" fields. Unfortunately it didn't work so I tried with much easier and easier test and finally realized that even something simple as the code above doesn't work. Please note that if I replace moveTo method with close(), it works fine - the child window closes after 5secs. I tried it with Firefox. With Opera it only opens the child window.
Any help/suggestions/ideas will be appreciated! Thanks in advance!

In this specific case, why don't you simply try:
window.open("https://www.youtube.com/", "otherW", "width=500, height=500, top=50, left=20, resizable");
this should not interfere with the same-origin policy.

Related

Open pre-existing page and change parts of it

I am using javascript to open the species_county file in a new window/tab and then jquery to change the contents of an h1 tag with id speciesTitle.
open_event_test.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>Click the button to open a new window called "MsgWindow" with some text. </p>
<button onclick="myFunction('Yada')">Yada</button>
<script>
function myFunction(species)
{
console.log(species);
var myWindow = window.open("species_county.html", species);
myWindow.document.getElementById("speciesTitle").html(species);
}
</script>
</body>
</html>
species_county.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1 id="speciesTitle">Species in County</h1>
</body>
</html>
I get error saying the element I'm grabbing has value null. I need to replace only some content. Document.write does not work because it will not open the species_county file, it will create an entirely new page.
There are a few possible issues with your script.
1) Elements Do Not Have html Method
As mentioned by beercohol, there is no such method as html() on an HTML Element. html() is a jQuery method, which is a property of a jQuery Object. In order to use this, you need to either use jQuery to select the element, or use JavaScript's native innerHTML property.
myWindow.document.getElementById("speciesTitle").innerHTML = species;
// or
$(myWindow.document).find('#speciesTitle').html(species);
2) The Window/Frame's DOM Has Not Loaded
There's a high chance that, by the time you've run the code to change the speciesTitle element, the window that you've opened has not yet finished loading its DOM. This would result in an error along the lines of:
TypeError: myWindow.document.getElementById(...) is null
You'll need to somehow make sure that you don't run the HTML-altering code until the DOM of the new window has finished loading. Traditionally, this is a job for jQuery, but here's a quick (non-cross-browser-friendly) pure JavaScript example within your myFunction method:
function myFunction (species) {
var myWindow = window.open("species_county.html", species);
myWindow.onload = function() {
// DOM has loaded
this.document.getElementById("speciesTitle").innerHTML = species;
}
}
3) Same Origin Policy
For security reasons, most browsers won't let you make adjustments to a window of another frame unless both frames come from the same origin. If you're working locally, the chances are you're not using a domain name or an IP address which match. Chrome doesn't let you make these communications over the filesystem (not by default anyway), but I have had some success with Firefox waiving Same Origin Policy between files locally on the file system. Either way, this won't work on a legitimate browser if you are attempting to communicate with a frame from a completely different domain.
For more information, see the window.open() FAQ on the MDN website. Note the part about cross-domain:
A script loaded in a window (or frame) from a distinct origin (domain
name) cannot get nor set properties of another window (or frame) or
the properties of any of its HTML objects coming from another distinct
origin (domain name).
4) Popup Blockers
It's also likely that you may run into trouble with various browser implementations of popup blockers. These will outright refuse to open the new frame, resulting in a null window object. You will first need to 'allow' your page to open a window through some configuration in the browser (usually a popup-blocker icon makes itself apparent).
The obvious problem is that html() is not a method of the Element object returned by getElementById()
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
https://developer.mozilla.org/en-US/docs/Web/API/Element
The property you're looking for is innerHTML instead.
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
Try this for your script:
<script>
function myFunction(species) {
console.log(species);
var myWindow = window.open("species_county.html", species);
myWindow.document.getElementById("speciesTitle").innerHTML = species;
}
</script>
html() is a jQuery function, so I suspect that's where you're getting confused. You don't really need jQuery just for this however, although you are including it.
You are trying to modify an element on a different page, and that's not possible with JavaScript in the way you're handling it.
One way to achieve your goal is to pass a $_GET parameter and use JavaScript on the newly loaded page to change the element.
Change this:
var myWindow = window.open("species_county.html", species);
myWindow.document.getElementById("speciesTitle").html(species);
To this:
var url = "species_county.html?species=" + encodeURIComponent(species);
window.open(url);
And then in species_county.html, look for the species parameter and change the title.
var mySpecies = location.search.split('species=')[1];
if(mySpecies !== undefined) {
document.getElementById("speciesTitle").innerHTML=mySpecies;
}
Unfortunately, shennan's 3rd idea was right, so I had to end up solving it like this:
open_event_test
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>Click the button to open a new window called "MsgWindow" with some text.</p>
<button onclick="myFunction('Bombus balteatus')"><em>Bombus balteatus</em> Dahlbom</button>
<button onClick="myFunction('Bombus auricomus')"><em>Bombus auricomus</em> (Robertson)</button>
<script>
function myFunction(species)
{
var newhtml = '<!DOCTYPE html><head><meta charset="utf-8"><html><title>'+species+'</title></head><body><h1><em>'+species+'</em> in County</h1></body></html>';
var newWindow = window.open(species, '_blank');
newWindow.document.write(newhtml);
}
</script>
</body>
</html>

click on an image link when a web page is opened using javascript

I'm new in Javascript and this is my code
<!DOCTYPE html>
<html>
<body>
<img src="http://www.example.com/1/img" border="0" />
<script>
function () {
document.getElementById('test').click();
};
function();
</script>
</body>
</html>
I was trying to open that link when the web page is loaded but I make some errors. Any help?
The way you define and invoke function is not correct. This is invalid syntax construction as function declaration (statement staring with function keyword) requires a name to be valid javascript code.
So you either give function a name an invoke it:
function somename() {
document.getElementById('test').click();
};
somename();
.. or use IIFE (immediately-invoked function expression):
(function() {
document.getElementById('test').click();
})();
However, in your case you don't really need as you don't use it for what it's really useful, i.e. creating new scope. Simple line
document.getElementById('test').click();
would be just enough.
You don't need the example function... remove onclick="example(this)...". Since you are clicking via javascript, the normal function of the click is to go to the link specified in the href attribute anyway.
If you just want to open a new link on page load, you can also remove all the body and just use the following:
<body>
<script>
window.location.assign = "http://example.com";
</script>
</body>
Do it like this:
<!DOCTYPE html>
<html>
<body>
asdf
<script>
document.getElementById('test').onclick();
function yourfunction(){
alert("clicked");
}
</script>
</body>
</html>
What we do here is assigning the function "yourfunction()" to "onclick" of your anchor (the element). Due to the fact that your code is automatically executed when you reload the page (note that we've just posted a line of code into the script tag) you can trigger the onclick event just by using ".onclick()".
However, you're executing "yourfunction()" every time you reload the page and as you click your anchor.
The function itself is pretty boring. It just makes an alert (small window with a message and ok button) which says "clicked".
Further reading:
How can I trigger a JavaScript event click
https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onclick
https://developer.mozilla.org/de/docs/Web/API/Window/alert
Some further advice. I think you are trying to achieve a "redirection" to another site as soon as you got to a domain. You probably want to do stuff like redirecting a typo ("gogole.com") to your "real" domain (google.com). This shouldn't be done with Javascript! You have to configure your webserver to do so (it's pretty easy). See this for example.
However, ther is also another approach to achieve this:
<meta http-equiv="refresh" content="0; url=http://www.example.com/">
Put this line of code into the of your document.

Modal popup window's contents not being rewritten in IE after load

I'm trying what should have been a simple operation: when a user clicks a link a modal window pops up that's populated with some appropriate data in a string. Here's the HTML for the window:
<!DOCTYPE HTML>
<html>
<head>
<title>Modal Display Window</title>
</head>
<body>
<div id="modal_display_block">REPLACE THIS</div>
</body>
</html>
And this is the Javascript function that calls and populates the window:
function displayCenterBlock(data) {
DispWin = window.open("modal_window.html", "", 'toolbar=no,status=no,width=300,height=300');
DispWin.onload = function() {
DispWin.document.getElementById('modal_display_block').innerHTML = data;
}
}
This works great in every browser I've tried except Internet Explorer. In IE the innerHTML does not get rewritten by the data. Is there some IE-specific trick or tweak I need to apply to get this working in that browser?
Many thanks in advance!
ON EDIT: I've discovered that if I move the element rewrite line out of the onload function it then works fine in IE but not in other browsers. It appears my options are to use some conditional code to rewrite at once for IE and to wait for page load for all other browsers, or to abandon the rewrite element approach and just use a document.write. I get from forum searches people like to discourage document.write but that's looking pretty appealing right now.
Okay, for better or worse this code achieves the goal and appears to work cross browser, even in IE.
DispWin = window.open("", "Display", 'toolbar=no,status=no,width=300,height=300');
DispWin.document.open();
DispWin.document.write(data);
DispWin.document.close();
DispWin.focus();
I get that document.write can re-write the whole page, and that is sometimes bad, but in this case that is exactly what I want: a single small page displaying only what was passed in the data argument. I can style it inline.

Is it possible to override javascript in an iFrame from the parent? If so how?

I'm using the Telerik RadSpell control in one of our touchscreen applications. I've managed to style it just right however the darn thing uses window.alert and window.confirm for prompting the user if they want to keep changes etc.
I want to disable these alerts without having to pull apart and modify the telerik controls.
The issue is that the spellcheck dialog uses an iframe and I can't seem to override the window.confirm function inside the iframe.
Sample Code to test overriding confirm.
<!-- mainpage.htm -->
<html>
<head>
<script type="text/javascript">
window.confirm = function(msg){ alert(msg); }
confirm("Main Page Confirm");
</script>
</head>
<body>
<iframe src="./iframepage.htm" >
</iframe>
</body>
</html>
<!-- iframepage.htm -->
<html>
<head>
<script type="text/javascript">
confirm("iframe confirm");
</script>
</head>
<body>
Some content.
</body>
</html>
Results in
Is it possible to override the javascript in an iframe from the parent? If so how?
I just shared an easier solution in the first forum, which demonstrates how to override the cancelHandler and hide the confirm dialog.
For your convenience I am pasting the solution below:
I would propose an easier way to disable the popup and it is to override the cancelHandler function. To do that follow the steps below:
1) Create a JS file named dialog.js in the root of the web application and populate it with the following function:
Telerik.Web.UI.Spell.SpellDialog.prototype.cancelHandler = function (e) {
if (this._cancel.disabled) {
return $telerik.cancelRawEvent(e);
}
//changes will be applied only if spell handler response is received, text has changed
//and the user confirms
this.closeDialog(this._spellProcessor && this._spellProcessor.textChanged() && true);
return $telerik.cancelRawEvent(e);
}
2) Save the file and set the DialogsScriptFile property of RadSpell to point to this file, e.g.
3) Test the solution.
I hope this helps.
You can get a reference to the innerwindow using javascript IFF the frame is from the same exact domain as the parent.
//Get iframe element by getElementById, frames[0], or whatever way you want
var myFrame = document.getElementById("myFrame");
//Get the window of that frame, overwrite the confirm
myFrame.contentWindow.confirm = function(msg){ alert("I overwrote it! : " + msg); }
You should be able to:
document.getElementById('iframe').contentWindow.confirm = [this is confirm in the iframe];
Perhaps something like this might work nicely for you:
document.getElementById('iframe').contentWindow.confirm = window.confirm;
This would link the confirm of the iframe to the confirm of the parent, which is nice if you already have some handling for confirms in the parent.
Note that you also will want to add some handling for possible undefined objects.
var iframe = document.getElementById('iframe');
//iframe exists
if(iframe){
var iframe_window = document.getElementById('iframe').contentWindow;
//window exists (won't if frame hasn't loaded)
if(iframe_window){
iframe_window.confirm = window.confirm;
}
}
You can take a look at the following resources, which could be helpful for your scenario:
http://www.telerik.com/community/forums/aspnet-ajax/spell/how-do-i-turn-off-the-confirm-dialog.aspx
and
http://www.telerik.com/help/aspnet-ajax/spell-client-check-finished.html
They show how to remove the RadSpell confirm and alert popups.
Best regards,
Rumen

Close iframe cross domain

I am trying to do something similar to the Clipper application here http://www.polyvore.com/cgi/clipper
I can make the iframe appear in another website (cross domain). But I cannot make the "close" button to work.
This is what I used but it doesn't work for cross domain (basically remove the iframe element)
window.parent.document.getElementById('someId').parentNode.removeChild(window.parent.document.getElementById('someId'));
Can you help? Thanks.
You should use a library that abstracts this (e.g. http://easyxdm.net/wp/ , not tested). Fragment ID messaging may not work in all browsers, and there are better approaches, such as postMessage.
However, your example (Clipper) is using a hack called fragment id messaging. This can be cross-browser, provided the page containing your iframe is the top level. In other words, there are a total of two levels. Basically, the child sets the fragment of the parent, and the parent watches for this.
This is a similar approach to Clipper's:
parent.html
<html>
<head>
<script type="text/javascript">
function checkForClose()
{
if(window.location.hash == "#close_child")
{
var someIframe = document.getElementById("someId");
someIframe.parentNode.removeChild(someIframe);
}
else
{
setTimeout(checkForClose, 1000)
}
}
setTimeout(checkForClose, 1000);
</script>
</head>
<body>
<iframe name="someId" id="someId" src="child.html" height="800" width="600">foo</iframe>
</body>
</html>
child.html:
<html>
<head>
<script type="text/javascript">
setTimeout(function(){window.parent.location.hash = "close_child";}, 5000);
</script>
<body style="background-color: blue"></body>
</html>
EDIT2: Cross-domain and independently controlled are different. I dug into the (heavily minified/obfuscated) Polyvore code to see how it works (incidentally, it doesn't in Firefox). First remember that bookmarklets, such as the Clipper, live in the context of the page open when they start. In this case, the bookmarklet loads a script , which in turn runs an init function which generates an iframe, but also runs:
Event.addListener(Event.XFRAME, "done", cancel);
If you digg into addListener, you'll find (beautified):
if (_1ce2 == Event.XFRAME) {
if (!_1cb3) {
_1cb3 = new Monitor(function () {
return window.location.hash;
},
100);
Event.addListener(_1cb3, "change", onHashChange);
}
}
cancel includes:
removeNode(iframe);
Now, the only remaining piece is that the iframe page loads another script with a ClipperForm.init function that includes:
Event.addListener($("close"), "click", function () {
Event.postMessage(window.parent, _228d, "done");
});
So we see clearly they are using fragment ID messaging.
Try hiding the contents of the iframe, and don't worry about actually getting rid of the iframe element in the parent.
There is another implementation of the old hash hack. It's backwards compatible, easy javascript-only, and very easy to implement:
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/

Categories