child.onload not getting called in IE8 but works in Firefox and Chrome - javascript

When I click the hyperlink the child.onload function does not get called in IE8. I don't know why but works in other browsers.
Also there are no syntax errors. This snippet I've pasted from the html file.
Also if I assign the child form fields using setTimeout 5 sec etc then it's working in IE8.
JavaScript:
<script type="text/javascript">
function openWindow(){
var child=window.open("index.php?option=com_aicontactsafe&pf=4&tmpl=component",'win2','width=400,height=350,menubar=yes,resizable=yes');
if(child!==null) {
child.onload=function() {
alert("In onload");
child.document.getElementById("aics_ForDocument_Title").value=window.document.getElementById("documentname").innerHTML;
child.document.getElementById("aics_FormURL").value="$referer";
child.document.getElementById("aics_FormURL").readOnly=true;
};
}
return false;
}
</script>
HTML:
<div id="reportthis">
<a href="#" onclick=" openWindow();">
<img src="images/instruments/reportthis.jpg" width="110" height="31" alt="Report This" title="Report this document for any issues" />
</a>
</div>

Related

Inline JS resulting in 2 new windows on mobile devices

The following code on an iPhone opens two new pages - Twitter and an empty page. What's wrong with this code? I'm returning a false from the local function so this behavior shouldn't occur.
<a href='http://twitter.com/intent/tweet?url=<?php echo $permalink; ?>' onclick='javascript:return (function(){window.open("http://twitter.com/intent/tweet?url=<?php echo $permalink; ?>", "MsgWindow", "width=600, height=600, scrollbars=yes", false); return false;})();'>
<img onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'" style="margin-right:5px; width:40px; height:40px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAMAAAAPkIrYAAAAclBMVEVhhMZZjcphkMxdislbjMlZjMlZjspWkctWks1vodOOstuaut+xzOfA1Ova5/T+/v/////2+fzx9vvv9frp8PjP4vKLu+Bzq9pekMtZl85Wmc9kpNZqrdp1stt8tt7///9ai8hZjMhai8hZjMpZjMhai8o88kBNAAAAH3RSTlP+/vDo3MzEtZfIzMnH4O3z/uDZz8q/emRjTzwkCQABjfokiQAAA2JJREFUWMOlmNnOqyAQgEdcoNbEv6eaANqaDMP7v+LR7kWgLnPZ6ucsMBtcYtJrKQQv8jwvuBBS99GnIfxXJ3lKxpIhMwkhGsaFXs/qZGEMojWOkMlFt4qlRWLCYrlazNLcmqhYU6hFrF4gmJ+CHktnLJUimQWCTP5gXbldRLqFgfcxVpdbs1ww02GWZmhWiVUhllpu31MzI/0stVKpm4DysTRYsw/2YnXbUON97VzWNQOzTSjtHRa3G1HGIv9mqc2oyWXyk3VltINF0H+wBO3Ry1LxZnVg9gmpF6vYyzLZk6WXozDkC/1g8UVmICur9ni4XTQkJ1a2uLP6eQwTT81o62GSdgy5zWRBjr7djSXnSrCGucadh4fUx7IZ+tkhEjdWNj985XBi9ivqL9SdZ9AtVOl1ZHUeD7fj44cPmK2+USVXrgagR5b0s4bh+OG/+pt1GqRrI4iR5bnV0D7c/PyrHByp5vHKL9B7cjw9TKqrB61yUO0cRdRB50nyxF7WtGUyfuv4jfrnu76oQHoPZvN+8dS0paPX2XuaBQjPJxKE8xCRJsTyZK6krY51hNV6MyIH72U8D39/EdbRe+0LKHw/l0NUSm+2yCH3sZKYhUOdoLe78LIMVFHXo1nBwvstCrnL3yxkXn+NMChP60yc/BVIqpaVoSNWBVJ6ASLQ3Zz+Av4fc1eguwbh/wod1x2I8Q0BEgOlIuD9JlThR6106DNU+Yw8JSHWmCf60IRBllVnF1cHGw80HVyKSAPDnIPxdwg2HpiNOVqEvkSsddSqD7FBZKpD88SaMjYW6cY18MzifetUH2dqC9+ZryuIjjRTfbzMMyuVzYzUxucIuNdtj5FE7NPEuqnYr6ZVP/oc6+v1iJXHapLykODPMSJ/9l82cFrfZ+dnx/rsvy753rYQ0lePqff2mPjuVy8c96n10UdfetjVk0P3OXfIHYrR1BN+zUOw18I3q0+3TjE26Wfzo9loJuj5XKu2WQnSO2/DFs2kfw8gV09rhDK0n1C4LgD4hXL2JnpVNJGp2D6n58tVs0X3Y88kYRkMSfzef3X8N8wicb1oL6dyikbUjsVQLt4XqohuhFioVXtMLTIvhygNrkXD+9WrEvm0Wp3qhn2ATC5Uv2VXO8VB3da+WZbdFr+qiz79HwpZt/mH+WYDAAAAAElFTkSuQmCC" alt="Twitter Share" />
</a>
I think you overcooking it with the self-executing function. You can simply add an additional return false as below. Keep it old school.
<a href='https://google.com' onClick='window.open("https://stackoverflow.com"); return false;'>
Google, or so maybe not...
</a>
Ideally, you should not have this inline, but if you must then you can add additional functions separated by ; and return false at the end.
You should not have an IIFE there. It should not be inline and the javascript: label is not needed
Here is a safer code - it alas does not run in a stacksnippet but you can copy it and use it in a page
Here is a working version
http://plungjan.name/SO/popup.html
function clickOpen(e) {
var w;
try {
w = window.open(this.href, this.target, "width=600,height=600,scrollbars");
} catch (e) {
return true; // let the link just work
}
return w ? false : true; // cancel click if window opened
}
window.addEventListener("load", function() {
[...document.querySelectorAll("#social a")].forEach(lnk => lnk.addEventListener("click", clickOpen))
})
<div id="social">
<a href='http://twitter.com/intent/tweet?url=<?php echo $permalink; ?>' target="MsgWindow" class="popup">
<img onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'" style="margin-right:5px; width:40px; height:40px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAMAAAAPkIrYAAAAclBMVEVhhMZZjcphkMxdislbjMlZjMlZjspWkctWks1vodOOstuaut+xzOfA1Ova5/T+/v/////2+fzx9vvv9frp8PjP4vKLu+Bzq9pekMtZl85Wmc9kpNZqrdp1stt8tt7///9ai8hZjMhai8hZjMpZjMhai8o88kBNAAAAH3RSTlP+/vDo3MzEtZfIzMnH4O3z/uDZz8q/emRjTzwkCQABjfokiQAAA2JJREFUWMOlmNnOqyAQgEdcoNbEv6eaANqaDMP7v+LR7kWgLnPZ6ucsMBtcYtJrKQQv8jwvuBBS99GnIfxXJ3lKxpIhMwkhGsaFXs/qZGEMojWOkMlFt4qlRWLCYrlazNLcmqhYU6hFrF4gmJ+CHktnLJUimQWCTP5gXbldRLqFgfcxVpdbs1ww02GWZmhWiVUhllpu31MzI/0stVKpm4DysTRYsw/2YnXbUON97VzWNQOzTSjtHRa3G1HGIv9mqc2oyWXyk3VltINF0H+wBO3Ry1LxZnVg9gmpF6vYyzLZk6WXozDkC/1g8UVmICur9ni4XTQkJ1a2uLP6eQwTT81o62GSdgy5zWRBjr7djSXnSrCGucadh4fUx7IZ+tkhEjdWNj985XBi9ivqL9SdZ9AtVOl1ZHUeD7fj44cPmK2+USVXrgagR5b0s4bh+OG/+pt1GqRrI4iR5bnV0D7c/PyrHByp5vHKL9B7cjw9TKqrB61yUO0cRdRB50nyxF7WtGUyfuv4jfrnu76oQHoPZvN+8dS0paPX2XuaBQjPJxKE8xCRJsTyZK6krY51hNV6MyIH72U8D39/EdbRe+0LKHw/l0NUSm+2yCH3sZKYhUOdoLe78LIMVFHXo1nBwvstCrnL3yxkXn+NMChP60yc/BVIqpaVoSNWBVJ6ASLQ3Zz+Av4fc1eguwbh/wod1x2I8Q0BEgOlIuD9JlThR6106DNU+Yw8JSHWmCf60IRBllVnF1cHGw80HVyKSAPDnIPxdwg2HpiNOVqEvkSsddSqD7FBZKpD88SaMjYW6cY18MzifetUH2dqC9+ZryuIjjRTfbzMMyuVzYzUxucIuNdtj5FE7NPEuqnYr6ZVP/oc6+v1iJXHapLykODPMSJ/9l82cFrfZ+dnx/rsvy753rYQ0lePqff2mPjuVy8c96n10UdfetjVk0P3OXfIHYrR1BN+zUOw18I3q0+3TjE26Wfzo9loJuj5XKu2WQnSO2/DFs2kfw8gV09rhDK0n1C4LgD4hXL2JnpVNJGp2D6n58tVs0X3Y88kYRkMSfzef3X8N8wicb1oL6dyikbUjsVQLt4XqohuhFioVXtMLTIvhygNrkXD+9WrEvm0Wp3qhn2ATC5Uv2VXO8VB3da+WZbdFr+qiz79HwpZt/mH+WYDAAAAAElFTkSuQmCC"
alt="Twitter Share" />
</a>
</div>

Javascript does not run without this broken component

When setting this up I did not initially notice that the third var declaration had an incorrect method call. The page functioned as I hoped and all was well.
Later I noticed that there was an error clocked in the inspector. I take out the offending line and all should be good- but the script does not work anymore. Strange. So I fix it and change getElementId('close') to the correct getElementById('close') and it the script as a whole still does not work.
This indicates that the script needs the broken component to properly function.
Be aware that the part that does not work anymore is openModal(). The audio.setAttribute() and audio.play() are in the same block and still work, so that is good.
I do not actually need a var close since the closeFunc() is called automatically onclick.
My html:
<div id='myModal' class='modal'>
<div id='modal-content'>
<span onclick='closeFunc()' id='close'>close x</span>
<object id='pdf-enter' data='' type='application/pdf'><p id='fallback-text'>Your browser does not support this media. You can download it <a id='dl-link' href=''>here.</p></a></object>
</div>
</div>
<div class='aud'>
<audio id='paudio' src='../../music/Available Now.mp3' controls='controls' preload="metadata">Your browser does not support the <code>audio</code>element.</audio>
<p id='audio-metadata'></p>
</div>
. . .
<li><a href='#0' class='title'>Sassthefrass <i onclick='audiosass()' class="fa fa-play-circle-o fa-fw" aria-label='Listen to music.'></i> <i onclick='openModal(), sass()' class='fa fa-file-pdf-o fa-fw' aria-label='View the sheet music.'></i></a>
</li>
and the javascript
<script defer async>
var modal = document.getElementById('myModal');
var here = document.getElementById('dl-link');
var close = document.getElementId('close');
var pdf = document.getElementById('pdf-enter');
function openModal() {
modal.style.display = "block";
}
function sass() {
pdf.setAttribute('data', '../../scores/Sassthefrass Perusal.pdf');
here.setAttribute('href', '../../scores/Sassthefrass Perusal.pdf');
}
function closeFunc() {
modal.style.display = "none";
}
</script>
When correctly working, clicking on the pdf FA icon opens a modal with a pdf showing the sheet music. When the code is 'error free', it does not do this anymore.
This is a reduced version, but you can see the entire thing in action at cortlandmahoney.com/pages/comp/acoustic.html. Be aware the site is still in development, but is near completion.
Close is not defined as an ID.
You have to define as 'close x'
and at your javascript you can assign function like :
document.getElementById('foo').onclick=function(){
alert("You have clicked close");
};
I looked at your website link and there is one more exception regarding jquery.
In jquery you have to define as $('#id').onclick() function to assign onclick function.
Your code worked fine on my end with a little modification. Unless I don't I understand you.
<div id='myModal' class='modal'>
<div id='modal-content'>
<span onclick='closeFunc()'>close x</span>
<object id='pdf-enter' data='' type='application/pdf'><p id='fallback-text'>Your browser does not support this media. You can download it <a id='dl-link' href=''>here.</p></a></object>
</div>
</div>
<div class='aud'>
<audio id='paudio' src='../../music/Available Now.mp3' controls='controls' preload="metadata">Your browser does not support the <code>audio</code>element.</audio>
<p id='audio-metadata'></p>
</div>
. . .
<li><i onclick='audiosass()' class="fa fa-play-circle-o fa-fw" aria-label='Listen to music.'>audiosass</i> <i onclick='openModal(), audiosass()' class='fa fa-file-pdf-o fa-fw' aria-label='View the sheet music.'>open</i>
</li>
<script defer async>
var modal = document.getElementById('myModal');
var here = document.getElementById('dl-link');
var close = document.getElementById('close');
var pdf = document.getElementById('pdf-enter');
function openModal() {
modal.style.display = "block";
}
function audiosass() {
pdf.setAttribute('data', '../../scores/Sassthefrass Perusal.pdf');
here.setAttribute('href', '../../scores/Sassthefrass Perusal.pdf');
}
function closeFunc() {
modal.style.display = "none";
}
</script>

How to wrap <object> (or <embed>) in <a> and disable object click event (HTML/Javascript)

I need to navigate some url by clicking on swf file. I have to hide ancor url
<a id="bottomLink" style="display: block; z-index: 10000"
onclick="replaceAdLinkTech(this);" href='' target='_blank'>
<div onclick="replaceAdLinkTechEmbed(this)">
<object onmousedown="event.preventDefault(); return false;"
onclick="event.preventDefault(); return false;" id="bottomEmbedSWF"
style="display: none;" width="728" height="90"
data="/Content/Images/Main/tehno-bottom.swf">
</object>
</div>
</a>
Javascript:
function replaceAdLinkTech(el) {
el.setAttribute("href", "https://ad.admitad.com/g/95d8174bcc812e836de5e20a1b9cd2/");
return true;
}
When tag img inside (instead object) all works great, but swf object (and embed) tags beave themself differently.
How to fire ancor click event properly?
Edited.......
I handle it for chrome, but not for firefox. I add 2 eventlisteners:
var bottomAd = document.getElementById("bottomEmbedSWF");
bottomAd.addEventListener(
'click', stopDefAction, false
);
bottomAd.addEventListener(
'mousedown', stopDefAction, false
);
function stopDefAction(evt) {
evt.preventDefault();
var bottomAdbottomAdLink = document.getElementById("bottomLink");
bottomAdbottomAdLink.click();
return false;
}
I don't know what to do with firefox (it should work accordingly their documentation - https://developer.mozilla.org/ru/docs/Web/API/event/preventDefault)

scripting not working in google chrome while running in IE

Following code is working fine for me IE but not working in Chrome.
i want to open the link in same page in HTML by java script
<SCRIPT LANGUAGE="javascript">
function clickHandler()
{
var xid= document.getElementsByTagName("span");
var xsp= xid[0].id;
if(xsp.charAt(0)=="M") {
var oC=document.getElementById("C"+xsp.substr(1));
if(oC.style.display=="none")
oC.style.display="";
else
oC.style.display="none";
}
}
</SCRIPT>
html code is as following
<html>
<BODY onClick = "clickHandler();">
<a href="javascript:void(0)">
<u><b><span id=M26>2011-2012</span></b></u>
</a>
<div id=c26 STYLE="display:none">
<a href="javascript:void(0)">
<u><b><span id=M27>2012-2013</span></b></u>
</a>
</div>
<div id=c27 STYLE="display:none">
</div>
</body>
</html>
You use a upperCase C inside the function, but the ID starts with a lowercase c
var oC=document.getElementById("C"+xsp.substr(1));
has to be
var oC=document.getElementById("c"+xsp.substr(1));
Requested modification(you must remove the onclick from the body-element)
<script>
document.onclick=function(e){
var _this=(window.event)//reference to the clicked element
? event.srcElement//IE
: e.target;//others
if(_this.id.match(/^M(\d+)$/)){//extract the number
try{
var oC=document.getElementById("c"+RegExp.$1);//target-element
oC.style.display=(oC.style.display=='none')//set the display
?''
:'none'
}catch(e){}
}
}
</script>

click handler in capty plugin

I am trying this JS code in jquery capty plugin . However the plugin needs an image to works, like:
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
Well, when i add this image the JS below didn't works. Basically what i want is just click in span and show an alert message with the content.
$('.tag_content').live('click', function(event){
var span_val = $(this).parent().children("span").html();
alert(span_val);
});
html code
<div class="images">
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
<div id="content-target1">
<span class="tag_content">Design</span>
</div>
</div>
Any idea ? thanks
The following code seems to work for me. You can try it out on jsFiddle: http://jsfiddle.net/fZSGt/4/
$('#default1').capty();
$('.tag_content').click(function() {
//var span_val = $(this).parent().children("span").html();
var span_val = $(this).html();
alert(span_val);
});
I also changed $(this).parent().children("span").html() to $(this).html() because it seems to be unnecessary for your code.

Categories

Resources