This was unexpected. I use Chrome as my primary development browser and make generous use of "console.log" (way better than alerts!)
Anyway, I have a page inside an IFrame (for uploading images). That page includes scripts that often write out to the console window (console.log) for tracking purposes. The first time the parent page submits the embedded page via script, everything goes smoothly. If I, however, then attempt to submit the page a second time I get the error ...
Uncaught TypeError: Cannot call method 'log' of null
All of a sudden it seems that the console is no longer available. If I replace it with an alert the alert box appears as expected, but the page no longer submits either.
Has anybody experienced anything like this before?
I want to thank folks for their responses. I did not include any code in the OP because it is an extensive script and parsing out an "example" of what I was attempting to do so that it wasn't too tedious to go through would likely strip out any relevancy.
I am posting, however to say that I did discover the problem.
I have PageA which contains an IFrame which is in turn loaded with PageB.
<html>
<head><title>PageA</title></head>
<body>
<IFrame src="PageB" name="frame1" id="frame1"></IFrame>
</body>
</html>
PageB contains a function that needs to be called from PageA when a button is clicked.
<!-- PageB -->
<html>
<head><title>PageB</title></head>
<body>
<form id="form1" name="form1" >
</form>
<script>
var SubmitForm = function(){
var $form = $("form[id$='form1']");
$form[0].submit(); // this was not firing
console.log("some log output"); // this was throwing an error
};
</script>
</body>
</html>
<!-- PageA -->
<html>
<head><title>PageA</title></head>
<body>
<IFrame src="PageB" name="frame1" id="frame1"></IFrame>
<button onclick="submitIFrameForm()">Submit</button>
<script>
var frameWindow = frames["frame1"];
var frameForm = frameWindow.SubmitForm;
function submitIFrameForm(){
frameForm();
};
</script>
</body>
</html>
THE PROBLEM
When PageA first loads, the IFrame is loaded with PageB and the script in PageA makes it's reference (frameForm) to the "SubmItForm()" function on PageB. When I click on the submit form button in PageA, PageB is submitted back to the server. No problem ...
However when PageB is submited it is UNLOADED from the window. So when I click on the
submit button in PageA a second time, although PageB may reload it is a different instance of the page. Therefore all the variables which reference the original PageB are now pointing to nothing ... hence the window that console was referencing no longer exists, so the "log" method cannot run.
THE FIX
Instead of creating a global reference to the contents of the IFrame, we must re-establish this reference to the function each time the button is clicked. (Since the IFrame is a member of PageA we do not need to re-establish the IFrame reference).
<!-- PageA -->
<html>
<head><title>PageA</title></head>
<body>
<IFrame src="PageB" name="frame1" id="frame1"></IFrame>
<button onclick="submitIFrameForm()">Submit</button>
<script>
var frameWindow = frames["frame1"];
function submitIFrameForm(){
frameWindow.SubmitForm(); // move the reference to the click event handler
};
</script>
</body>
</html>
I hope that this made sense and that it helps someone out there. I get caught up on this kind of stuff constantly.
Related
I have below html code:
<html>
<head>
<script src="http://differentDomain/main.js"></script>
</head>
</html>
And the main.js has following code:
window.onload = function {
console.log('event fired!!');
}
Now event fired!! is getting logged if I use relaod button to load the page. However, it is not happening if I hit the URL using enter key in the address field.
In the course of testing, I get to add new local javascript file in the page like:
<html>
<head>
<script src="http://differentDomain/main.js"></script>
<script src="http://sameDomain/local.js"></script>
</head>
</html>
Surprisingly after adding the above file, load event started firing and event fired!! is getting logged in both cases.
Firstly please let me know why event is not getting fired for first time.
Secondly how adding a new file after the existing file makes difference in event getting fired.
Note: I could observe in the network tab that the local file is not getting cached but main.js does.
I have a simple HTML code to print the page. Below is the code:
<!DOCTYPE html>
<html>
<head>
<script>
function printPage()
{
var w = window.open("http://www.sigmaaldrich.com/catalog/CofADocRequest.do?symbol=209104&LotNo=MKBP0842V&brandTest=SIGMA","_self");
window.focus();
window.print();
}
</script>
</head>
<body >
<input type="button" onclick="printPage()" value="print a div!" />
</body>
</html>
What the code does is, it displays a button, on clicking that button it calls a function. The function uses open() to open a new URL in the same page by using the “_self ” parameter.
As we can see in the code, the print() is being called after the call to open method. But in my browser IE11, the print pop is being shown befor loading the page.
Due to this I am not printing the correct page.
Can anybody help me on this.
The problem is that window refers to the current window, which is the original.
By opening a new window in self you replace the page, this is basically a redirect.
And if you open it via popup and print it as w.print() than you run into cross-origin security error.
You could use iframe to this with a proxy as shown here
How do print specific content inside the iframe
and
here
How do print specific content inside the iframe
Am hoping I haven't overlooked a solution here on SO, but I have been pulling my hair out trying to figure out what I am doing wrong and hoping somebody can see what it is. Here is the configuration:
I have a page that is served on DOMAIN1.COM. For the most part is is a form with a submit button and lots of jQuery. The form can be lengthy and so a user needs to scroll down the page to input form fields. The submit button is at the bottom of this form while the output results are at the top of the form. When the user clicks the submit button he/she cannot see the results because they are off of the top of the page. What I want to do is use jQuery scrollTo() to position to the top of the page once the submit button is clicked.
The problem is that the page above (and submit button) is within an iFrame on DOMAIN2.COM and so when the submit button is clicked I have a cross domain situation that I need to overcome.
I posted a question here, but my question wasn't really accurate. The thread evolved into helpful information and pointed me to a script that uses jQuery postMessage() to communicate cross domain, but I am having a problem implementing the proposed solution. Here's my code:
DOMAIN1.COM (child):
<html>
<head>
<!-- Load jquery -->
<script type="text/javascript" src="./jquery-2.0.3.min.js"></script>
<!-- Cross-domain scripting goodness (scroll to top) -->
<script type="text/javascript" src="./jquery.ba-postmessage.js"></script>
<script type="text/javascript">
// EVENT Handler - Form Submission
$(function () {
$("#btnSubmit").bind('click', function (event) {
// Get the parent page URL as it was passed in,
// for browsers that don't support window.postMessage
var parent_url = decodeURIComponent(document.location);
window.postMessage("scrollTop", parent_url, parent);
});
});
</script>
</head>
<body>
<form>
... Lots of form fields resulting in vertical height ...
<input type="submit" id="btnSubmit" value="Submit" />
</form>
</body>
</html>
DOMAIN2.COM (parent):
<html>
<head>
<!-- Load jquery -->
<script type="text/javascript" src="./jquery-2.0.3.min.js"></script>
<!-- Cross-domain scripting goodness (scroll to top) -->
<script type="text/javascript" src="./jquery.ba-postmessage.js"></script>
<script type="text/javascript">
// Cross-domain - scroll window to top
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
if (event.data == "scrollTop") {
window.scrollTo(0, 0);
}
}
</script>
</head>
<body>
<iframe src="http://domain1.com/index.html"></iframe>
</body>
</html>
Running both pages above on the same domain provides the desired results - clicking submit scrolls the page to the top.
Running on separate domains as documented and coded above, the page does not scroll to top, my output results fail, and jQuery outputs this error message in Firebug:
DataCloneError: The object could not be cloned.
If I change the code to leave out the parent parameter in the page on DOMAIN1.COM like:
var parent_url = decodeURIComponent(document.location);
window.postMessage("scrollTop", parent_url); //, parent);
Then nothing happens at all and no errors are output. It does not appear that receiveMessage() on DOMAIN2.COM gets called at all.
Can anyone see what I might be doing wrong that prevents this code from working cross domain?
I think it very late now but for others, it may work.
You are almost there; You need to use
window.postMessage("scrollTop","#domain of parent page exact page");
Instead of your code snippet:
window.postMessage("scrollTop", parent_url, parent);
If at the time the event is scheduled to be dispatched the scheme, hostname, or port of otherWindow's document does not match that provided in targetOrigin, the event will not be sent by Dom. Read documentation here
In Parent Page use following code snippet.
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
if (event.origin !== "#domain of iframe")
return;
if (event.data == "scrollTop"){
window.scrollTo(0,0);
}
}
I am trying to entegrate 3D Secure payment logic with javascript.
As I post the credit card info to bank, I get a reply html.. This html redirects the screen to 3D Password screen of the bank which is
<html>
<head>
<title>MDpay default response template for web</title>
</head>
<body bgcolor="#02014E" OnLoad="OnLoadEvent();" >
<form name="downloadForm" action="https://katmai.est.com.tr/mdpayacs/pareq" method="POST">
<!-- Some Input Fields -->
</form>
<SCRIPT LANGUAGE="Javascript" >
function OnLoadEvent() {
document.downloadForm.submit();
}
</SCRIPT>
</body>
</html>
if we want to open this html in a pop up screen, OnLoadEvent does not get triggered with :
var popup = window.open('','');
popup.document.write("'"+data+"'");
popup.focus();
bu if this does work which is everything good. I call the onload function in body so i dont care what is the function to be called in OnLoad.
var popup = window.open('','');
popup.document.write("'"+data+"'");
popup.document.body.onload();
popup.focus()
BUT, we don't want to do this in popup, we dont want to open a new tab or page. We want to do this on same screen that we get the values from the user.. So I write the returning html to a div, but because there can be no 2 body tags in one html, the browser does not include the new body tag which includes OnLoad function name..
document.getElementById('vpos').innerHTML=data;
document.downloadForm.submit() // this is the code that works in OnLoad function.if a write that code statically of course it works, but this code logic can always change.
How will I solve this. Hope I am clear..
Let'u start with following example:
Create three pages in same directory:
test.html
index.html
Your test.html:
<html>
<head>
<script>
function test()
{
alert('Going to google.com?');
window.location="http://google.com";
}
</script>
</head>
<body>
google.com<br/>
<input type="button" value="google" onclick="test();" />
google.com<br/>
</body>
</html>
Now check test.html page on IE as well as firefox or crome.
You will notice following points:
Button works perfectly.
First hyperlink works differently in IE and other browser. In IE, it brings us back to index.html page, while in firefox, it stays on same page.
For first hyperlink, window.location fails.
Second hyperlink you cannot click on that, as mouse over event will fire first, and it works perfectly!
Why?
My major interest is on 3rd point, as it even gives us alert, window.location fails.
The JavaScript event fires, window.location is set, then the default action of the link fires and the browser goes to '', which (IIRC) resolves as the current URI.
This is the same effect you get if you click on a link, then quickly click on a different link. The browser doesn't have time to go to the first one before receiving the instruction to go to the second one, and it goes to the second one. If you delay the return of the function (by putting the alert second) it gives enough time for the request for the first URL to go through for that one to be visited instead of the second.
You would need to cancel the default action which, when you're using intrinsic event attributes (not recommended, unobtrusive JavaScript is the way forward), is done by returning false.
onclick="test(); return false;"
Try this:
<html>
<head>
<script>
function test()
{
alert('Going to google.com?');
window.location="http://google.com";
return false;
}
</script>
</head>
<body>
google.com<br/>
<input type="button" value="google" onclick="Javascript:return test();" />
google.com<br/>
</body>
</html>