It works fine on chrome and Firefox.
But not on IE9.
The reason is that you include a https site to a http site.
IE does then block the Javascript.
You should have both site running with the same protocol.
You are right is does work on the initial page load in Chrome and FireFox. Once you navigate to ‘Request an Estimate’ the jQuery pull-down at the top or the date picker within the form no longer work.
I’ve made sure that everything is using http with the examples to rule out mixing protocols.
you already using the same protocols and you still have the problems?
Correct, still a problem.
Is this a different example then? Because in the link above still
https://www.myorderdesk.com/jobsubmit.asp?Provider_ID=736071
is the iframe site.
Hmm, I had it set to load http. Ok, I’ve changed it to load a different page that is http and has the problem (pull-down at top and date picker).
http://wp3.printvia.com/web-to-print/
I just tested the page you want to include on a simple plain html page with only a simple iframe.
and there it does not work either.
Seems the site you want to include does not work properly in an iframe.
This is either because of
– a programming error
– They don’ want that their site is used in an iframe.
Best, Michael
Here’s an example I put together a few years back that is cross domain but no dynamic iframe height that works.
http://printvia.com/techcenter2/
Here’s another example that works with an iframe. However it won’t work within a wordpress site.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test">
<meta name="viewport" content="width=device-width">
</head>
<body>
<table>
<tr style="text-align:center;">
<td style="text-align:center;"><a href="http://www.myorderdesk.com/jobsubmit.asp?Provider_ID=735203" target="mainFrame">Order</a></td>
<td style="text-align:center;"><a href="http://www.myorderdesk.com/myjobs.asp?Provider_ID=735203" target="mainFrame">Order History</a></td>
<td style="text-align:center;"><a href="http://www.myorderdesk.com/settings.asp?Provider_ID=735203" target="mainFrame">My Profile</a></td>
<td style="text-align:center;"><a href="http://www.myorderdesk.com/logout.asp?Provider_ID=735203" target="mainFrame">Sign Out</a></td>
</tr>
</table>
<div style="margin:20px;">
<iframe id="mainFrame" name="mainFrame" src="http://www.myorderdesk.com/jobsubmit.asp?Provider_ID=735203" width="100%" scrolling="no" border="0"></iframe>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="application/javascript"> (function(e){function o(e){i.log&&window.console&&console.log(t+" "+e)}var t="[iFrameSizer]",n=t.length,r=0,i,s={log:!1,contentWindowBodyMargin:8,doHeight:!0,doWidth:!1,interval:0,callback:function(){}};e(window).on("message",function(e){function r(e){function r(){function e(e){u.iframe.style[e]=u[e]+"px",o(u.iframe.id+" "+e+" set to "+u[e]+"px")}i.doHeight&&e("height"),i.doWidth&&e("width")}function s(){var t=e.substr(n).split(":");u={iframe:document.getElementById(t[0]),height:t[1],width:t[2]}}var u={};t===e.substr(0,n)&&(s(),r(),i.callback(u))}r(e.originalEvent.data)}),e.fn.iFrameSizer=function(n){return i=e.extend({},s,n),this.each(function(){function n(){return a.contentWindow?!0:!1}function s(){a.style.overflow="hidden",a.scrolling="no",e(a).on("load",function(){u(a)}),u(a)}function u(){function e(){""===a.id&&(a.id="iFrameSizer"+r++,o("Added missing iframe ID: "+a.id))}function n(){var e=a.id+":"+i.contentWindowBodyMargin+":"+i.doWidth+":"+i.log+":"+i.interval;o("Sending init msg to iframe ("+e+")"),a.contentWindow.postMessage(t+e,"*")}e(),n()}var a=this;n()&&s()})}})(window.jQuery);</script>
<script type="application/javascript">
$('iframe').iFrameSizer({
log: true,
contentWindowBodyMargin:8,
doHeight:true,
doWidth:false,
interval:250,
callback:function(messageData){
$('p#callback').html('<b>Frame ID:</b> ' + messageData.iframe.id +
' <b>Height:</b> ' + messageData.height +
' <b>Width:</b> ' + messageData.width);
}
});
</script>
</body>
</html>
My last code example is using cross domain dynamic iframe height.
If I use the iframe http://www.myorderdesk.com/jobsubmit.asp?Provider_ID=6315&OrderFormID=202799&GroupID=0 you use in http://printvia.com/techcenter2/
the dropdown does work for me in my example and in wordpress while
http://www.myorderdesk.com/jobsubmit.asp?Provider_ID=736071&OrderFormID=401502
does not!
And the last code example does use postMessage where you have to make modifications on the iframe page also. It’s another but in my opinion more complicated way to get around the cross domain issue. It is supported by most browsers while the workaround in ai is supported by all browsers.
http://www.myorderdesk.com/jobsubmit.asp?Provider_ID=735203 is also working on my testpage and on my wordpress install.
So I still think your page
http://www.myorderdesk.com/jobsubmit.asp?Provider_ID=736071&OrderFormID=401502
is the problem. Maybe the other skin has something to do with it…
Have you solved your problem?
No, not yet. I am having others on our development staff look into things at our end. Thanks for all of your help so far.