I am trying to attach an onclick event to an iframe that is in editable mode using the JavaScript and HTML code below. The code works fine in IE8, Safari, and Chrome, but does not work in Firefox or Opera. I have spent several hours doing some research, rewriting the code, and testing every idea that I can think of, all without success. So far, I have only been able to work out that line 8 might be the root of my problem. Can anybody tell me what I may be doing wrong and offer me any tips or code samples to help solve my problem? Any help would be appreciated.
Here is my code;
<html>
<head>
<script type="text/javascript">
function iFrameOn(){
document.getElementById("wysiwyg").contentWindow.document.designMode = 'On';
}
function iFrameEvent(){
document.getElementById("wysiwyg").contentWindow.document.body.onclick = function(){
alert('Hello world!');
}
}
</script>
</head>
<body onload="iFrameOn()">
<iframe name="wysiwyg" id="wysiwyg" onload="iFrameEvent()"></iframe>
</body>
</html>
You must use contentWindow and contentDocument to support all browsers:
var frame = document.getElementById('wysiwyg');
if(frame.contentWindow) {
//
} else if(frame.contentDocument) {
//
}
I believe that contentWindow was a property that IE initally implemented that other browsers may have started supporting at some point but I believe the standard is contentDocument.
Someone here has posted a cross-browser solution:
Chrome: Getting iFrame and inserting into body
Related
I am trying to get the targeted element with the pseudo-class :target after document load.
I created the following example to illustrate the problem.
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded",function(){
console.log(document.querySelector(":target"));
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
If I load test.html, then the console outputs :
null
If I load test.html#test on Chrome and Opera, then the console outputs :
null
If I load test.html#test on Firefox and IE11, then the console outputs :
<div id="test"></div>
My questions are :
Which browsers have the correct behaviour ?
Does DOMContentLoaded is the correct event to call querySelector(":target") ?
Is there another way to get targeted element after document load ?
PS : I succeeded to fix the problem on Chrome and Opera thanks to setTimeout but It is not a good solution. Does someone has a better idea ?
EDIT : I found a similar issue with JQuery Selecting :target on document.ready()
This is a known issue with WebKit- and Blink-based browsers that has never been directly addressed. The workaround suggested by web-platform-tests is to request an animation frame, which only happens after page rendering, at which point the :target pseudo seems to match successfully:
async_test(function() {
var frame = document.createElement("iframe");
var self = this;
frame.onload = function() {
// :target doesn't work before a page rendering on some browsers. We run
// tests after an animation frame because it may be later than the first
// page rendering.
requestAnimationFrame(self.step_func_done(init.bind(self, frame)));
};
frame.src = "ParentNode-querySelector-All-content.xht#target";
document.body.appendChild(frame);
})
My testing shows that simply using onload works fine, but the author may be on to something and besides, a single call to requestAnimationFrame() costs practically nothing, so you may as well follow suit.
The following test uses onload (as opposed to DOMContentLoaded, which fires immediately after the DOM tree has been constructed but not necessarily rendered):
data:text/html,<!DOCTYPE html><script>window.onload=function(){console.log(document.querySelector(":target"));};</script><div id="test"></div>#test
The following test uses requestAnimationFrame() in conjunction with onload:
data:text/html,<!DOCTYPE html><script>window.onload=requestAnimationFrame(function(){console.log(document.querySelector(":target"));});</script><div id="test"></div>#test
It looks like Firefox has the ideal behaviour, though maybe not the correct one.
Nevertheless, as an alternative, you can use:
document.addEventListener('DOMContentLoaded', () => document.querySelector(window.location.hash));
and that will work in all browsers.
Hi i hope you can help me
I am having an issue in IE 7/8 with the rock solid template. See the template http://www.pixelsparadise.com/showcase_2013/#load=http://www.rocksolid.joomlatemplates.info
It seems to be caused by JavaScript code in the header.
The error code i receive in the IE debugger is
SCRIPT1014: Invalid character
<script type="text/javascript">document.getElementById("sectors").addEventListener('change', function () {
window.location = this.value;},false); </script>
This is the piece of code seemingly causing the problem.
Basically the area stops any button used within the template from working. Any ideas how to fix this for Internet Explorer 7/8?
Thanks
You have an extra, "invisible" (it can be seen if you copy that code into something like Notepad++) character just before the </script> tag; just delete everything between the ; and </script> and it should be resolved.
take out the space in the script tag closure
</script>
change to
<script type="text/javascript">document.getElementById("sectors").addEventListener('change', function () {
window.location = this.value;},false); </script>
As usual, I want to alert users to unsaved changes when leaving a page. I have this test page:
<html>
<head>
<title>Testing</title>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/base.js"></script>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/edit.js"></script>
<script language="JavaScript1.1">window.onbeforeupload=moveAway</script>
</head>
<body onLoad="init()">
Google
</body>
</html>
The moveAway function is defined in "edit.js" like this:
function moveAway ()
return "foo";<br>
}
The event doesn't fire, or at least it just leaves the page silently (using IE8, Firefox 15, and Chrome 20). I've tried breakpointing the function in Firebug and it never gets to the breakpoint. I've tried it from the web server (an SSL server, the test version of which runs at 127.0.0.1:8443) and I've tried opening the file directly with the browser (which is why I used absolute URLs for the first two <script> tags). I've tried removing the "src=" attribute from the script tags.
On the other hand, this page has an example which does work (at least in Firefox):
https://web.archive.org/web/20211028110528/http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm
There is also a very similar example at MSDN which also works:
http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
I really can't see the difference between what they do and what I'm doing. can anyone tell me why their code works and mine doesn't?
use jQuery bind function.. it works great for me..
see bellow
$(window).bind('beforeunload', function() {
return "Want to leave?";
});
onbeforeupload , really ? it should be onbeforeunload. Is that a spelling mistake, or is that how your actual code is ?
You have a syntax error, the function should be:
function moveAway () {
return "foo";
}
I'm trying to figure out how to launch a function from an iframe but the following example won't work, any ideas?
<input class='reply' onclick='parent.replytopost()' type='button' value='Reply' />
PARENT PAGE FUNCTION (In the body if that makes a difference):
<script>
function replytopost(){
alert("test");
parent.document.getElementById('mainbar').innerHTML = "TEST";
parent.document.getElementById('post_reply').show();
}
</script>
This might become an issue with security-tightened browsers (such as Safari).
I ran against the same type of problem recently, and I'm now a happy user of window.postMessage.
You will still have to reference it using window.parent but this will prevent the vast majority of issues to happen.
It works for me. Look here
Why do you call parent.* in non-iframe replytopost script?
Will window.opener work for you? I know it works from a parent to a newWindow. I don't know about iframe.
http://www.w3schools.com/jsref/prop_win_opener.asp
The following script works fine in IE7 but fails to execute in Firefox 3. The div tag which was display: none; shows in IE but never in FF. I am not a client / javascript guy... thanks.
<script type="text/javascript">
//<![CDATA[
document.getElementById("Fred1_Panel").style.setAttribute("display","inline");//]]>
</script>
try this:
document.getElementById("Fred1_Panel").style.display = '';
OR
document.getElementById("Fred1_Panel").style.display = 'inline';
This will work in both browsers:
document.getElementById("Fred1_Panel").style.display = 'inline';
In FF, starting with either Tools | Error Console, or FireBug's console is a good way to see what errors are occurring.
This code should work:
document.getElementById("Fred1_Panel").style.display = "inline";
In general if you encounter problems in Firefox you can easily discover the exact problem (and maybe find out the solution) using Firebug plugin or simply seeing at the Error console.