Support » Plugin: Advanced iFrame » Javascript not working within iframe of remote site

  • Resolved mherz73

    (@mherz73)


    I am testing out the Advanced Iframe plug-in and it works great. However once the remote page loads elements related to javascript are not working.

    Page in reference
    http://wp3.printvia.com/web-to-print/

    For example the pull-down titled ‘Search or Select’. Or if you click on the ‘Request an Estimate’ and click the ‘Send’ button at the bottom nothing happens.

    It looks like the iframe plugin is continuously running some JS. I don’t know for sure, but that may be blocking the other JS from running. There aren’t any errors in the console.

    Any help would be appreciated. Would love to promote this plug-in to our clients.

    http://wordpress.org/plugins/advanced-iframe/

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author mdempfle

    (@mdempfle)

    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.

    Thread Starter mherz73

    (@mherz73)

    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.

    Plugin Author mdempfle

    (@mdempfle)

    you already using the same protocols and you still have the problems?

    Thread Starter mherz73

    (@mherz73)

    Correct, still a problem.

    Plugin Author mdempfle

    (@mdempfle)

    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.

    Plugin Author mdempfle

    (@mdempfle)

    Thread Starter mherz73

    (@mherz73)

    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/

    Plugin Author mdempfle

    (@mdempfle)

    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

    Thread Starter mherz73

    (@mherz73)

    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/

    Thread Starter mherz73

    (@mherz73)

    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>
    Thread Starter mherz73

    (@mherz73)

    My last code example is using cross domain dynamic iframe height.

    Plugin Author mdempfle

    (@mdempfle)

    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…

    Plugin Author mdempfle

    (@mdempfle)

    Have you solved your problem?

    Thread Starter mherz73

    (@mherz73)

    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.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Javascript not working within iframe of remote site’ is closed to new replies.