I am designing a simple Rich Text Editor using HTML/Javascript. It uses iframe. While it is working great in IE6 (and possibly newer IE versions), it is broken in FireFox. The iframe cannot be edited or used in any way.
The HTML <body>
<input type="button" id="bold" class="Button" value="B" onClick="fontEdit('bold');">
<input type="button" id="italic" class="Button" value="I" onClick="fontEdit('italic');">
<input type="button" id="underline" class="Button" value="U" onClick="fontEdit('underline');">
<hr>
<iframe id="TextEditor" class="TextEditor"></iframe>
The Javascript (for IE)
TextEditor.document.designMode="on";
TextEditor.document.open();
TextEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
TextEditor.document.close();
TextEditor.focus();
The above script makes iframe editable in IE. Fails to do so in FF. So I changed a few things for FF version-
The Javascript (for FF)
id("TextEditor").contentWindow.designMode="on";
id("TextEditor").contentWindow.open(); //this line is responsible for pop-ups
id("TextEditor").contentWindow.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>'); //this line throws error: id("TextEditor").contentWindow.write is not a function at the FF debug console.
id("TextEditor").contentWindow.close();
id("TextEditor").focus();
This section of code makes FF provoke an pop-up alert with a blank page as a target. It's still broken. What now follows are general functions for things like id() and fontEdit()-
function fontEdit(x,y){
TextEditor.document.execCommand(x,"",y);
TextEditor.focus();
}
function id(id){
return document.getElementById(id);
}
function tag(tag){
return document.getElementsByTagName(tag);
}
I'm sure FF doesn't handle iframe this way. So how do I get iframe to be used as a Rich Text Editor and without showing pop-ups. Please try your best to avoid jQuery since I'm not that good in it yet. Which is why the custom functions like id() and tag() exists.
And, I'm aware that there are other freely available Text Editors for me to download and use so please do not suggest me any such solutions and do not ask me why I must re-invent the wheel. Only answer if you know where I am going wrong and if you can actually help me fix the problem.
FF provoke an pop-up alert with a blank page as a target because you are calling the function window.open, instead you shoud call document.open.
window.open: opens a new browser window.
document.open: It opens an output stream to collect the output from any document.write() or document.writeln() methods. Once all the writes are performed, the document.close() method causes any output written to the output stream to be displayed.
Note: If a document already exists in the target, it will be cleared.
See The open() method
This should works for you:
id("TextEditor").contentWindow.document.designMode="on";
id("TextEditor").contentWindow.document.open(); //this line is responsible for pop-ups
id("TextEditor").contentWindow.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>'); //this line throws error: id("TextEditor").contentWindow.write is not a function at the FF debug console.
id("TextEditor").contentWindow.document.close();
Related
I have a website with lots of code, so obviously something is wrong, but I can't post all the code here. Here's the exact code I'm trying to use though.
Parent document...
<iframe name=combosIframe id=combosIframe src=getCombos.php style='position:absolute;left:300px;top:0px;width:275px;height:520px;overflow-y:scroll;overflow-x:hidden;border:1px solid black'></iframe>
<form name=colorForm id=colorForm action=colorCombos.php method=post target=combosIframe>
<input type=submit id=submitColors value=SubmitColors>
</form>
Inside the iframe, colorCombos.php page...
<script language=JavaScript>
alert('load');
function doSomething(){
alert('hi');
}
</script>
<form>
<input type=button value=ClickMe onClick=doSomething()>
</form>
Scenario: I click the parent form button to load the new page into the iframe.
Problem: the JavaScript in the colorCombos.php page does not alert, either on page load, or when clicking the button. If I view the page on its own it works fine.
Specs: php5, using Chrome browser.
Of note: there are no errors when I view the javascript console. Also there is nothing else on the colorCombos.php page. Both files are in the same directory. Thanks for any help, I'm really stumped.
Not using quotes within HTML Attributes can have undesired effects. Try adding quotes around all the values of each HTML Attribute.
Example:
<input type="button" value="ClickMe" onClick="doSomething()"/>
I started with a blank setup (which was working) copied the code from my site (which has lots of other code), bit by bit into the new document to see when the script stopped working. I ended up copying EVERYTHING (literally ctrl+a) into the new document, and it worked fine. I then renamed the new document to be the name of the old document, and it STOPPED working. The old document (i.e. the parent document) is named rangeTool.php, not that I think that is relevant necessarily.
So I have a solution, but not an answer. What in the world could cause one document to not work? Something wrong on the server? I deleted the old file off the server and loaded the new copy, but that didn't work as long as the name was rangeTool.php. For example, I renamed it testcode.php and it worked fine.
I'm still interested in why/how this happened, but at least the pressure is off now that it's working for me.
So I think Chrome and Firefox interpretation of DOM is screwing with me. I am trying to print a pdf from a browser (dynamically created) because I can't have the header and footer normally printed with printing an HTML page. Now I was just sending the PDF using fpdf from a php page and use the toolbar or right click and print but now the clients want a button on the page to initiate the print dialog but of course not print anything else but the PDF.... so I embeded it:
<embed
type="application/pdf"
src="print_pdf.php"
id="pdfDocument"
width="100%"
height="100%" />
and a button's onClick called
<script type="text/javascript">
function printDocument(documentId) {
((function(){return document.getElementById(documentId);})()).print();
//Wait until PDF is ready to print
if (typeof document.getElementById(documentId).print == 'undefined') {
setTimeout(function(){printDocument(documentId);}, 1000);
} else {
var x = document.getElementById(documentId);
x.print();
}
}
</script>
where documentID = "pdfDocument"
This worked great in IE9 but chrome and mozilla all say "Uncaught TypeError: Object # has no method 'print'"
so I tried to use thinking embed was causing improper object interpretation in chrome:
<object data="print_pdf.php" type="application/pdf" width="100%" height="100%" id="pdfD2">
alt : test.pdf
and called the same onClick, where documentID = "pdfD2"... "Uncaught TypeError: Object # has no method 'print'"
Then I tried an Iframe:
... "Uncaught TypeError: Object # has no method 'print'"
I'm so frustrated given Chrome is my go to... I even disabled chrome's builtin PDF view and used Adobe 10.xxx.. ARGH!!!
FYI, my simple button tags are:
<input type="button" value="Print Rx" onclick="printDocument('pdfDocument')">
<input type="button" value="Print Rx2" onclick="printDocument('pdfD2')">
<input type="button" value="Print Rx3" onclick="printDocument('pdfD3')">
I think the error is in the line:
((function(){return document.getElementById(documentId);})()).print();
which means that you "pack" (well possibly) uncompleted DOM into the closure.
It goes before the next line which checks for "undefined" print.
Apart from this, why do you use timeout, and not just use onload or DOMReady events?
I have written this code for Firefox:
<html><head><title>No</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<form action="javascript:void(alert('Yes'));">
<input type="submit" value="Submit">
</form>
<script>$($('form').submit())</script></body></html>
It correctly displays the alert box.
However, when i run this inside an iframe, with this code:
<html><body><iframe src="click.php"></iframe></body></html>
i don't get the alert box, not even if i click the submit button myself.
What is going on exactly? The same code works in Chromium
Well, don't do that then!
It doesn't make any sense to submit a form to a javascript: URL. Use a submit event handler to pick up the form submission and execute script, eg using jQuery:
$('#someform').submit(function() {
alert('Yes');
return false;
});
A good rule of thumb about when to use javascript: URLs is: never.
It looks like it's a problem with FF4 so I'll discuss it on their bugzilla if it's really their fault. I have modified the source so I'm not even sure it is a bug...
when on Mouse Over state on a link the status bar shows the link's location in the status bar like in the following image...
is there a way to change\override this to show some desired text...
Most browsers will block attempts to change the status line by default for security reasons (phishing).
You can try it anyway:
link here
A second approach:
link here
Con: you can't open it in a new tabblad / window using Ctrl + click for example.
In ie9 method 1 does not have any effect. Method 2 also defeats the purpose of concealing info, by placing active file path in status bar, rather than customary interpolated uri:
C:\\\filepath\server\local\whatever
Perhaps there is a way to use method 2. Possibly a proxy link-file location intercept. For example:
click here
where c:\links\anylink links to c:\private\privatefile ...?
Further: 'Con: can't open link in new tab / new window' ... javascript?
This should work
<a href="/www.example.com/contact.html" onmouseover="window.status='Contact'" onmouseout="window.status=''">
If you must change the status, here is a cross browser solution that works:
<a href=".: This a link" onClick="window.location='myurl.html';return false">
Downside is that it requires Javascript
Change "This is a link" to required text" and change "myurl.html" to the path of the window file.
If you need to open a url using "_blank" you can create a function that opens a new window instead.
Unfortunately ".:" has to appear at the front of the text otherwise it will render as a url. Tested in IE9. (Firefox and other browsers render this differently
For other browser you could alternatively use "link:" then your url. Tested in Firefox.
NB: you can only change window.status for Opera, (and possible IE 6 and earlier), for security reasons as mentioned in other people's suggestions.
onmouseover or JavaScript are removed from ckeditor of blog sites when we try to input to a page more data next time. So I think, this method should work tested by me in Firefox browser.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.btn {
border:none;
}
</style>
<form action="your url">
<input type="submit" class="btn" value="link here">
</form>
</body>
</html>
Ok, I am developing a simple program to do xmlhttprequests so I can get a handle on how they work. On that page I have a simple text box, a label, and a button. When the button is clicked it sends out a request to another page via the javascript method, and it stores the response in the label.
(this is all the code in the body)
<form id="form1" runat="server">
<div>
<input type="text" id="text1" value="StuffInTheBox" name="text1"/>
<label id="label1">Please Enter Name.</label>
</div>
</form>
<button id="button1" onclick="checkName(text1.value,'')">BUTTON</button>
This works perfectly in google chrome. But when it came time to try it out in IE7 it gave me an error. It said "Error: 'text1' is undefined". I've been trying to tweak everything I can to see if it makes a difference but now I'm kind of lost.
Any help would be much appreciated
edit: checkname function per request
The method calls loadXMLDoc which creates the xmlhttprequest object, forking the construction for older IE who use ActiveX and modern browers who have it native. It also creates a method to watch the status change, and if it is done successfully it recalls checkname with checkName('',results)
function checkName(input, response)
{
if (response != ''){
// Response mode
message = document.getElementById('label1');
message.innerHTML = response;
}else{
// Input mode
loadXMLDoc("http://localhost/xmlTest/Return.aspx","input="+input);
}
}
In your JavaScript "checkName(text1.value,'')" it is unclear what text1.value is referencing. You're assuming it's referencing the DOM Object you've declared in your HTML and FireFox seems to make that assertion as well however IE doesn't. text1 could have easily been a reference to an object declared earlier in your JavaScript code.
var text1 = {value: ""};
Frankly I'm surprised that FireFox didn't throw an error.
When referring to DOM objects (i.e. HTML elements) you need to use the document.getElementById or document.getElementsByName methods.
The following example was tested and works in both FireFox and IE and I would assume to work in Chrome, Safari and Opera as well.
<form id="form1" runat="server">
<div>
<input type="text" id="text1" value="StuffInTheBox" name="text1"/>
<label id="label1">Please Enter Name.</label>
</div>
</form>
<button id="button1" onclick="checkName(document.getElementById('text1').value,'')">BUTTON</button>
"text1" is the id of the input, but you haven't declared that the text1 variable in the JavaScript refers to that.
Perhaps this will work for you:
<button id="button1" onclick="checkName(document.getElementById('text1').value,'')">BUTTON</button>
It uses document.getElementById to retrieve the input before trying to find its value.