Hello following iframe code is not getting displayed at iPhone at all. It loads fine on other browsers and Android mobile browser. On Safari desktop browser, I need to specify
iframe onload=iFrameHeight(700) to make it displayed. However this still does not help for iPhone.
Any ideas?
Thank you.
<div class="contentpane"> <iframe onload="iFrameHeight()" id="blockrandom" name="iframe" src="http://www.maxhire.net/cp/?E5586A361E43515B79561C6532531A2604" width="100%" height="700" scrolling="no" align="top" frameborder="0" class="wrapper"> This option will not work correctly. Unfortunately, your browser does not support inline frames.</iframe> </div>
Related
You see, I have the following situation, I have an Iframe that is displayed on apple devices without problem, no matter the model, in desktop / pc it is displayed without problem, on android devices with any browser other than chrome is displayed correctly, now, with Android devices and chrome browser sometimes shows the IFrame and other times not, my IFrame is the following:
<iframe id="lgnIfra" width="100%" marginheight="0" marginwidth="0" onLoad="resize()" scrolling="no" frameborder="0" src="<%=path%>" align="bottom" iframe.src="javascript:parent.getFrameHTML()"></iframe>
Is there any way to load IFrame without any problem on Android devices and using chrome as a browser?
Update 1
I get next error in console:
Uncaught TypeError: Cannot read property 'scrollHeight' of null
This is my line in file .js
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
Any solution?
I am using jwplayer in my site, I have included the player using iframe. I have included the player js script.
<script src="//content.jwplatform.com/libraries/playerid.js"></script>
then iframe with the source.
<div style="position:relative; padding-bottom:56.25%; overflow:hidden;">
<iframe src="//content.jwplatform.com/players/MEDIAID-PLAYERID.html" width="100%" height="100%" frameborder="0" scrolling="auto" allowfullscreen style="position:absolute;"></iframe>
</div>
When the user clicks on a cover image, I will reload the source of the iframe
video_block.attr("src", src);
It was worked on my mobile till last week.(15-March-2017). Now it is not working on mobile devices, I saw they are saying support for autostart on mobile devices. I am not sure the latest release has an effect.
My extracted testing code(this simple code itself not autostart on mobiles, although the corresponding player is autostart enabled):
<html>
<head>
<title>
IFRAME SAMPLE
</title>
</head>
<body>
<div style="position:relative; padding-bottom:56.25%; overflow:hidden;"><iframe src="//content.jwplatform.com/players/mediaid-playerid.html" width="100%" height="100%" frameborder="0" scrolling="auto" allowfullscreen style="position:absolute;"></iframe></div>
<script src="https://content.jwplatform.com/libraries/playerid.js"></script><!-- Featured Video Card Player -->
</body>
Unfortunately auto-play is officially disabled in android and has been disabled in IOS for a long time. There is no option to play a video automatically in any major mobile device anymore. ( of course on a web page )
A white bar appears bellow the footer of my Wordpress site. I try to see what it is with the Chrome developer tool and it looks like it is an iframe.
I don´t know how this happened but the problem was not there a few weeks ago. It does not happen on my chrome browser but when I try it in any other browser or PC I see the white bar.
The site is http://preposicionesdeplacer.com/
The white bar you're seeing on some browsers is the body of your page.
It changes along with the body if you test it.
I added the following attributes to #colophon and the effect disappears across all my browsers.
position:absolute;
width:100%;
Its normal because below your footer you have several iframes. This one as you can see bellow has the display element set to no.
<iframe src="http://loadus.exelator.com/load//net.php?n=eJyVkmFLwzAQhv%2FKKK4f07Td5qbLirAO%2FLBvCoJIuSYxzWza0GS4%2FnuvdYIgAweBXN7k7rk3yVobNamkVpVnQRxMPrXw1Ri5jrOg8t7eRZHrG04M%2BMqDIrw1oxBhamZ8IU9asJhSugw7KXTHhqRp%2BjBNdjjqFoQh8iRr8G03JJ%2FFYTvd4cFtQmfTZKEwimmM0QEjinN5xMKv%2B33x%2FPy4fQs264G4Wf%2BrY24cgQbq3mvuSA9V246No55Z6HwjuwKr5y%2F5U36pMtQ452PncgseLrF0SUA0JzcClPTYdlNm582%2F%2FkcpyixD36FiNJ6FpWY36DE8MHqtTaKIaI9lLXmt%2BQdppI%2BsRlqm2lbVsmjQ5TddhmDs%2FVnm5vfK8euwIIg7WeIM3iRy7Ygd%2FkTmeysZfoNQOHsc3i8BWK3SZUrn5ewdYElXlM6TBZeLW1qKZP4D%2FgKO89UZ&h=75343745526d1625180b3cc2f82b37c2&ver=2" width="0" height="0" frameborder="0" style="display: no;"></iframe>
So just put this and normally it will hide this iframe too :
<iframe src="http://loadus.exelator.com/load//net.php?n=eJyVkmFLwzAQhv%2FKKK4f07Td5qbLirAO%2FLBvCoJIuSYxzWza0GS4%2FnuvdYIgAweBXN7k7rk3yVobNamkVpVnQRxMPrXw1Ri5jrOg8t7eRZHrG04M%2BMqDIrw1oxBhamZ8IU9asJhSugw7KXTHhqRp%2BjBNdjjqFoQh8iRr8G03JJ%2FFYTvd4cFtQmfTZKEwimmM0QEjinN5xMKv%2B33x%2FPy4fQs264G4Wf%2BrY24cgQbq3mvuSA9V246No55Z6HwjuwKr5y%2F5U36pMtQ452PncgseLrF0SUA0JzcClPTYdlNm582%2F%2FkcpyixD36FiNJ6FpWY36DE8MHqtTaKIaI9lLXmt%2BQdppI%2BsRlqm2lbVsmjQ5TddhmDs%2FVnm5vfK8euwIIg7WeIM3iRy7Ygd%2FkTmeysZfoNQOHsc3i8BWK3SZUrn5ewdYElXlM6TBZeLW1qKZP4D%2FgKO89UZ&h=75343745526d1625180b3cc2f82b37c2&ver=2" width="0" height="0" frameborder="0" style="display: none;"></iframe>
Tell me if that worked well for you, as for me it hides the iframe
Bootstrap Buttons and Grid layout of iframe elements are not working in Chrome in Android phone and Win 8.1 PC. The page displays well in Chrome and Safari in iOS(iPad), and Win8.1 IE11.
Buttons are defined as:
YVR 24hrs
A 3 across grid of iframes, are defined as:
<div class="row">
<div class="col-xs-4">
<iframe width="210" height="210" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1kTIy2JRSkkUoubdQ_pPMpSfXSCoG-U16Q1gjUpS_Eok/pubchart?oid=879890587&format=interactive"></iframe>
</div>
<div class="col-xs-4">
<iframe width="210" height="210" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1kTIy2JRSkkUoubdQ_pPMpSfXSCoG-U16Q1gjUpS_Eok/pubchart?oid=1692765152&format=interactive"></iframe>
</div>
Bootstrap elements display correctly in Chrome iPad (image), as well as in IE in Win8.1.
Problem: Buttons are simplified as text links and iframes stacked in Chrome Android phone Portrait and Chrome Android phone Landscape, and Chrome Win8.1 desktop. CLICK for Images
The source code is :
<iframe id="privacy-frame" frameborder="0"
src="http://www.cnn.com/partners/mobile/v2/privacy.policy/"
style="width: 100%; background-color:#fff">
</iframe>
When i try to browse the page http://mobile-demo.turner.com/election/tos.html in iphone the internal links doesn't work.
But if i try to browse the page with src URL(http://www.cnn.com/partners/mobile/v2/privacy.policy/) it works.
Is this some issue with iFrame on iphone? Same code does work on Android browser or desktop browser.