WordPress.org

Ready to get started?Download WordPress

Forums

Advanced iFrame
[resolved] Javascript not working within iframe of remote site (15 posts)

  1. mherz73
    Member
    Posted 10 months ago #

    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/

  2. mdempfle
    Member
    Plugin Author

    Posted 10 months ago #

    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.

  3. mherz73
    Member
    Posted 10 months ago #

    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.

  4. mdempfle
    Member
    Plugin Author

    Posted 10 months ago #

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

  5. mherz73
    Member
    Posted 10 months ago #

    Correct, still a problem.

  6. mdempfle
    Member
    Plugin Author

    Posted 10 months ago #

    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.

  7. mdempfle
    Member
    Plugin Author

    Posted 10 months ago #

  8. mherz73
    Member
    Posted 10 months ago #

    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/

  9. mdempfle
    Member
    Plugin Author

    Posted 10 months ago #

    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

  10. mherz73
    Member
    Posted 10 months ago #

    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/

  11. mherz73
    Member
    Posted 10 months ago #

    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>
  12. mherz73
    Member
    Posted 10 months ago #

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

  13. mdempfle
    Member
    Plugin Author

    Posted 10 months ago #

    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...

  14. mdempfle
    Member
    Plugin Author

    Posted 10 months ago #

    Have you solved your problem?

  15. mherz73
    Member
    Posted 10 months ago #

    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.

Reply

You must log in to post.

About this Plugin

About this Topic