|
JavaScript - Js/iframe Compatibility In Ie8?
Hi--
I have the following javascript which is setting up a quiz (delivered from off-site) into an iframe. The javascript code determines if the visitor has Flash or not, and then sets up the page, on button click, to deliver the appropriate version of the quiz into the iframe. For some reason, this code works in everything (it seems) except IE8. In IE8 without Flash, something (perhaps in the code itself?) kicks the viewer into a blank page. If someone could just test the URL below and tell me if they get the same problem, that would help! Maybe (I am thinking) it is because the computer I tested it on did not have JS enabled? Or maybe there is something in the code? Or maybe with the quiz delivered from off-site? Here is the code: Quote: <!--QUIZ BEGINS--> <article id="page_7c"> <div class="box" id="page1"> <a href="#page_1" class="close"></a> <div class="wrapper pad_bot1"> <div class="grid_16 prefix_4"> <p></p> <div id="tester"> </div> </div> </div> </div> </article> <!--QUIZ ENDS--> <SCRIPT> <!-- // courtesy of http://www.kirupa.com/developer/mx/detection.htm function FLASH_CHECK(){ var MM_contentVersion = 6; var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0; if ( plugin ) { var words = navigator.plugins["Shockwave Flash"].description.split(" "); for (var i = 0; i < words.length; ++i) { if (isNaN(parseInt(words[i]))) continue; var MM_PluginVersion = words[i]; } var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion; } else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0 && (navigator.appVersion.indexOf("Win") != -1)) { document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag document.write('on error resume next \n'); document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n'); document.write('</SCR' + 'IPT\> \n'); } if ( MM_FlashCanPlay ) { document.getElementById('tester').innerHTML = '<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMTY3MjMyMzUyNDMmcHQ9MTMxNjcyMzIzNzA*OCZwPTIwNDMyMSZkPSZnPTEmbz*wMWFhMzNjMDI4ZWM*NjNmYTZh/NGU1M2FiNzRmZTZlMSZvZj*w.gif" /> <iframe src="http://www.quizrevolution.com/act147691/mini/go/test_your_knowledge_about_ufos" width="380" height="400" frameborder="0" scrolling="no" name="mystudiyoIframe" title="QuizRevolution.com"><a href="http://www.quizrevolution.com/act147691/mini/go/test_your_knowledge_about_ufos">test_your_knowledge_about_ufos</a></iframe>' } else{ document.getElementById('tester').innerHTML = '<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMTY3MjMzMTU3NDUmcHQ9MTMxNjcyMzMxODA5NyZwPTIwNDMyMSZkPSZnPTEmbz*wMWFhMzNjMDI4ZWM*NjNmYTZh/NGU1M2FiNzRmZTZlMSZvZj*w.gif" /> <iframe src="http://www.quizrevolution.com/act147547/mini/go/test_your_knowledge_about_ufos" width="380" height="400" frameborder="0" scrolling="no" name="mystudiyoIframe" title="QuizRevolution.com"><a href="http://www.quizrevolution.com/act147547/mini/go/test_your_knowledge_about_ufos">test_your_knowledge_about_ufos</a></iframe>'; } } //--> </SCRIPT> And here is the URL of the site: Quote: http://www.ABCsofUFOs.com If you click on the link bottom left ("Test Your Knowledge of UFOs") that should send you to the appropriate version of the quiz. Many thanks for any help! Similar TutorialsIs there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. EDIT: i think the problem was i had an html element named 'comment' so IE was getting confused when i made a js variable 'comment' (don't use IE it is the worst browser) i am in the process of debugging a website, it works wel in Google Chrome and firefox but not in IE i am putting all the relevant code below. this is in the head tag, and is the only JavaScript executed when the debugger show the error Code: function first_run(){
answer_state=document.getElementById('state');//set node for 'show_answer' function
answer_ab=document.getElementById('ab');//set node for 'show_answer' function
answer_capitol=document.getElementById('capitol');//set node for 'show_answer' function
answer_next=document.getElementById('next');
comment=document.getElementById('comment')//line marked with error
ui=document.getElementById('UI');//sets 'ui' to form location
score_right=document.getElementById('right');//returns null
score_wrong=document.getElementById('wrong');
score_right=score_wrong.previousElementSibling//score_right work around
score_show_ans=document.getElementById('show_ans');
runs above code on page load Code: <body onkeydown="if (event.keyCode == 13){check()}" onload="first_run()">
in body tag, node that erred line refers to. Code: <div id=comment> </div> the error message in IE's developer tools debugger is "Object doesn't support this property or method" States javascript.html, line 395 character 1" i've done all of my coding in Chrome and have no expirence in IE's syntax, any ideas what the problem is? Hi, I have a piece of code that when executed will change the .onclick and .value of a button, Code: /* JAVASCRIPT */
function selectAllDays() {
var len = document.booking.days.length;
for (var i=0; i<len; i++) {
document.booking.days[i].checked = true;
}
changeDaysButtonD();
}
function deselectAllDays() {
var len = document.booking.days.length;
for (var i=0; i<len; i++) {
document.booking.days[i].checked = false;
}
changeDaysButtonS();
}
function changeDaysButtonD() {
var obj = document.getElementById('selectall');
obj.onclick = deselectAllDays;
obj.value = "Deselect All Days";
}
function changeDaysButtonS() {
var obj = document.getElementById('selectall');
obj.onclick = selectAllDays;
obj.value = "Select All Days";
}
Code: HTML <input type="button" id="selectall" name="selectall" value="Select All Days" onclick = "selectAllDays();"><br/> <input type="checkbox" name="days" value="Monday">Monday<br/> <input type="checkbox" name="days" value="Tuesday">Tuesday<br/> <input type="checkbox" name="days" value="Wednesday">Wednesday<br/> <input type="checkbox" name="days" value="Thursday">Thursday<br/> <input type="checkbox" name="days" value="Friday">Friday<br/> So, when the button is initially clicked it runs the selectAllDays() function, which will also run the function to change the state of the button to "Deselect all days" however when I run this in FireFox it gives the error of Error: selectAllDays is not defined Source File: http://davidc.herobo.com/groupsite/booking.html Though in Internet Explorer this runs fine and selects/deselects the checkboxes without any problem. I'd like to know if anyone knows why it won't work in FireFox? Help would be much appreciated, Thanks, Dave. Hi, I am not very experienced in programming, but I've noticed I keep running into a problem. I've got a particular javascript coding and for some reason it is only working for my mac visitors, but not PC. What can I do to make this coding compatible for both? Where might the issues be? thanks Hello I have this var set: var floatingMenu = { targetX: -270 , targetY: 13, hasInner: typeof(window.innerWidth) == 'number', hasElement: document.documentElement && document.documentElement.clientWidth, menu: document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId] }; I want the number to be assigned to targetX (the red part) to be different for Firefox, Chrome or Internet Explorer. How do i do that? Also, can i avoid this IE's warning about running active x content? Come on... This is a javascript for making a floating menu, there's no security issue whatsoever! Hi i have a php file that contain below content and it works great on firefox but not in IE8 actually IE8 doesnt reload the div Code: <?php
print <<<HERE
<script type="text/javascript">
$(document).ready(function() {
$("#loader").load("content.php?uname=$uname");
var refreshId = setInterval(function() {
$("#loader").load("content.php?uname=$uname");
}, 5000);
});
</script>
HERE;
?>
<div id="loader"></div>
also i tried like this and same thing happens Code: <?php
print <<<HERE
<script type="text/javascript">
setInterval("calldiv()", 5000);
function calldiv(){
$("#loader").load("content.php?uname=$uname");
}
</script>
HERE;
?>
<div id="loader"></div>
any help would be great Thanks. Dear all, can somebody help me with browser compatibility and this code. Working fine in Opera and Firefox, but do not working in Internet Explorer and Chrome. With one form working fine in every browser, but when I put second form it stops to work in Explorer and Chrome. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<SCRIPT type="text/javascript">
function showDiv(divIndex) { var f=document.forms[0]; var d=f.getElementsByTagName('div');
for(i=0;i<d.length;i++)d[i].style.display='none'
d[divIndex].style.display = 'block';
}
</SCRIPT>
</HEAD>
<BODY>
<form>
<select onchange="showDiv(this.value); ">
<option value="0" selected>option 1</option>
<option value="1">option 2</option>
<option value="2">option 3</option>
</select>
<div style="display:block;"><form action="001.htm" method="get" >
Your state<br>
<select name="statecode" id="statecode">
<option value="">Choose State for option 1...</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</select>
<input type="submit" name="search" value="Get Quotes" />
</form></div>
<div style="display:none;"><form action="002.htm" method="get" >
Your state<br>
<select name="statecode" id="statecode">
<option value="">Choose State for option 2...</option>
<option value="AK">California</option>
<option value="AL">Colorado</option>
<option value="AR">Connecticut</option>
</select>
<input type="submit" name="search" value="Get Quotes" />
</form></div>
<div style="display:none;"><form action="003.htm" method="get" >
Your state<br>
<select name="statecode" id="statecode">
<option value="">Choose State for option 3...</option>
<option value="AK">Massachusetts</option>
<option value="AL">Maryland</option>
<option value="AR">Maine</option>
</select>
<input type="submit" name="search" value="Get Quotes" />
</form></div>
</form>
</BODY></HTML>
Hello, so i got one question. I have this Java Script of old facebook chat which works great at chrome and firefox with greasemonkey but when i tried to put this at IE9 with IEPro plugin , facebook just went crazy. Cant open chat at all, also all site is broken. What is problem with this script at IE,Safari or Opera? Maybe you can help me thx. You can find that script here : www.fu.sk/107159.user.js Hi, I have an application in which a popup window is opened from main window, from that popup window on clicking a button, the control goes to a servlet and after some calculations the control returns to the popup window. This works fine in IE6. But the same code behaves improperly in IE8. In IE8 on clicking button on popup window instead of control coming back to same popup window a new popup is opened. Can anybody help me on this? Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. I adapted (well, attempted to, at least) a quote/testimonial rotation script to fit into my website. The script works PERFECTLY on Firefox but after making my modifications, I killed it in IE...and being a total n00b to JavaScripting.....I'm totally stumped. In Firefox, the script shows at the proper height. In Internet Explorer, the script is only shown at ~40 pixels and doesn't seem to be rotating through the different quotes (it still fades but it fades the same quote back and forth). The obvious question: HOW DO I FIX IT?!!? Original script was found at: http://www.caodesigns.com/blog/tutor....php?postID=33 My script is at: http://www.digitalctrl.org/help.html (right sidebar, in the "Testimonials" box). But something I want to know for future reference.......what is it that causes things to be formatted differently across browsers? This cross browser INcompatability is giving me grey hairs. I've been lurking around your community for a while now.....I hope you gents don't mind my first post being a question. If I need to reformat my post or do anything else to get assistance, please let me know so I can take care of it. I am trying to dynamically add rows to a table when the user clicks a button. here my function Code: function addFocusArea()
{
if(addTlFocusAreaCount <= 5)
{
//Create new Title row
var titleRow = document.createElement("tr");
var titleCol = document.createElement("th");
var titleText = document.createTextNode("Additional Focus Area " + addTlFocusAreaCount);
titleCol.appendChild(titleText);
titleRow.appendChild(titleCol);
document.getElementById("focusTable").appendChild(titleRow);
//Create new category row
var categoryRow = document.createElement("tr");
var categoryCol = document.createElement("td");
var categorySelect = document.createElement("select");
var categories = document.getElementById("<%=DecisionToolKeys.PRIMARY_FOCUS%>");
//copy a dropdown menu that is already existing on the page
for(var i=0; i<categories.length; i++)
{
var option = document.createElement("option");
option.value = categories[i].value;
option.text = categories[i].text;
categorySelect.options.add(option);
}
categoryCol.appendChild(categorySelect);
categoryRow.appendChild(categoryCol);
document.getElementById("focusTable").appendChild(categoryRow);
addTlFocusAreaCount++;
}
else
{
alert("You cannot add more than five additional practice areas.");
}
}
And here is my button Code: <input type="button" value="Add Focus Area" onclick="JavaScript:addFocusArea()"/> This is working in Firefox and Chrome, but not IE 8. Any clue as to why? Thanks, Nick Hello all. I am doing an experiment with setTimeout for a much larger project and cant seem to get this bit of code working. What is "supposed" to happen is on hover the div goes black, and on removing the mouse it turns red after 1 second. however, it doesnt work. ive tried a bunch of variations but nothing gets it to work. i want to line up a bunch of divs and not need to write a seperate function for each one. any ideas? here is the HTML: Code: <div id="0" onMouseOver="blackit('0')" onMouseOut="fadeit('0')"></div>
<div id="1" onMouseOver="blackit('1')" onMouseOut="fadeit('1')"></div>
<div id="2" onMouseOver="blackit('2')" onMouseOut="fadeit('2')"></div>
<div id="3" onMouseOver="blackit('3')" onMouseOut="fadeit('3')"></div>
here is the JavaScript: Code: function blackit(elemID)
{
document.getElementById(elemID).style.backgroundColor="#000";
}
function fadeit(elemID)
{
setTimeout("document.getElementById(elemID).style.backgroundColor='red'", 1000);
}
there is some CSS but nothing crazy. it should work but it doesnt. the black on hover works but then it either stays black or goes red immediately, not waiting the 1 second. thanks <BODY onLoad="populateYearSelect()"> <font face="Verdana"> <title>owner Calendar</title> </font> <!--webbot BOT="GeneratedScript" PREVIEW=" " startspan --> function populateYearSelect() { d = new Date(); curr_month = d.getMonth(); document.getElementById('arrivemonth').options[curr_month + 1].selected=true; curr_year = d.getFullYear(); for(i = 0; i <= 3; i++) { document.getElementById('arriveyear').options[i] = new Option(curr_year+i,curr_year+i); } } </script> This is the function I am using and it works great in IE but all other browsers are not even loading the function at all. What must i do to make this work in other browsers? I need them to work more so in Firefox and Safari more so than Opera, Avant or Netscape. Hi all, I am having trouble with an onmouseout event on a div tag. I have read about bubbling a little, and put to use some information I found on the internet, but I still can't overcome a few problems. What I am trying to achieve is that the addStyleDiv function will only call the addStyle function if the user mouses out of the 'rollover' div. As the code stands, the addStyleDiv function is called when any element within the div is moused out (this is expected--bubbling) and the addStyleDiv function handles these instances properly. However, when mousing out of the rollover div, the rollover div is never the source element that triggers the onmouseout event. There is no empty space in the rollover div, that is, it is entirely filled with elements, so that could be part of the problem, but shouldn't bubbling cause the event to be triggered twice-once for the internal element and once for the div itself? I would also be interested in knowing if the method by which I am handling the events is reliable on most browsers or if someone with more expertise can offer a suggestion to increase cross browser compatibility. Thanks a million in advance. HTML Code: <div id="rollover" onmouseout="addStyleDiv(event,'feat_main');">
<ul id="featured">
<li class="medical" onmouseover="addStyle('feat_medical');"><a href="equipment/medical">Medical</a></li>
<li class="fabrication" onmouseover="addStyle('feat_fabrication');"><a href="services/metal_fabrication">Fabrication</a></li>
<li class="capsnap" onmouseover="addStyle('feat_capsnap');"><a href="equipment/capsnap">CapSnap™</a></li>
<li class="hurricane" onmouseover="addStyle('feat_hurricane');"><a href="equipment/parts_washing/hurricane">Hurricane</a></li>
<li class="media" onmouseover="addStyle('feat_media');"><a href="video">Media</a></li>
</ul>
<div id="flyout" >
<ul id="feat_main">
<h1>Midbrook</h1>
standard page no rollover
</ul>
<ul id = feat_medical>
<h1>Medical</h1>
</ul>
<ul id = feat_fabrication>
<h1>Fabrication</h1>
</ul>
<ul id = feat_capsnap>
<h1>CapSnap</h1>
</ul>
<ul id="feat_hurricane">
<h1>Hurricane</h1>
</ul>
<ul id = feat_media>
<h1>Media</h1>
</ul>
</div>
</div>
JS Code: function addStyleDiv(e, x)
{
if (!e) var e = window.event;
var tg=(window.event) ? e.srcelement : e.target;
if (tg.id != 'rollover')
{
alert('leaving '+tg.tagName + ' '+tg.id);
return;
}
/*These next two lines are NEVER reached no matter what*/
alert('It must have finally seen rollover');
addStyle('feat_main');
}
function addStyle(x){
removeAllStyle();
document.getElementById(x).style.display="block";
}
function removeAllStyle()
{
removeStyle('feat_main');
removeStyle('feat_hurricane');
removeStyle('feat_fabrication');
removeStyle('feat_capsnap');
removeStyle('feat_medical');
removeStyle('feat_media');
}
Anyone have any issues with Safari in relation to javascript compatibility? I have a page that loads dynamically through user selections as follows: There is a set of three radio buttons. The user selects one and a div opens revealing a select box populated with entries related to the radio button selection. When the user makes a selection from the select box, one of two things happen. 1) If there are child records relating to their selection, a second div opens revealing another select box containing the child entries relating to the first select box choice. Or 2) if there are no child entries relating to the selection in the first select box, a div opens displaying a description relating to the selection they made in the first select box. The data is all coming from prepopulated javascript arrays. This works like a dream in IE and Chrome. Unfortunately, when we were in the final stages of testing before release to a live environment, we discovered it works in Safari only as far as the user makes a selection from the three radio buttons driving the opening of the first div layer containing the first select. At this point it stops working completely. On top of that, I can not find where in the latest release of Safari, that I can see any javascript errors (or if I even can). I am REALLY in need of help. Anything you can offer? Thanks!! Dmxsmith I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that. This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox): Code: function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}
Is it possible? |
|||||||