I'm trying to figure out why my images aren't displaying properly within my iframe. Every browser works fine with the exception of Firefox and Safari. I can still click the links within the iframe and open up the corresponding page, but the images just won't display. I am using the instansive instagram widget as my iframe content (instansive.com). Their code looks like this - >
<!-- INSTANSIVE WIDGET --><script src="//instansive.com/widget/js/instansive.js"></script><iframe src="//instansive.com/widgets/427ad0d8ae95cfc36f19bb10c960dbf03bbef870.html" id="instansive_427ad0d8ae" name="instansive_427ad0d8ae" scrolling="no" allowtransparency="true" class="instansive-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>
I'm not sure as to what I am doing wrong, or why it isn't displaying correctly with these two particular browsers.
There is nothing to do with iframe. Try giving the image path as /test/image.jpg instead of full path. This may work
Related
I have created on my website an empty webpage, I name it NewGame.
I have an .html name itm.html and I want to make it run in small 300x300 screen on my page NewGame.html. As long as I didn't find anything how can I do that.
I have searched in here or google or I was trying to do with href but that will redirect me to another page and I don't want that to happen.
Is it possible to run itm.html inside another .html in small screen area, like a youtube small video?
Thanks in advance
If I understood you correctly, you should use an iframe.
<iframe src="/itm.html" width="300" height="300"></iframe>
Put that in NewGame.html. Since both HTML files are on the same domain, it will create a "window" into the other webpage.
You're going to want to read up on the venerable iframe element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
A quick example:
iframe.myCoolIframe {
width: 300px;
height: 300px;
}
<iframe class="myCoolIframe" src="https://example.com/itm.html"></iframe>
You can use the embed tag in html and style it to the size you want.
<embed src="https://www.w3schools.com/TAGS/tag_embed.asp" width="300" height="200">
I am attempting to make my website use TLS / https. This problem occurs only on the https version and not the older http version of the website.
I have a link on my website which when clicked reveals an iframe on top of the rest of the website content.
The link looks like this:
Speed Check
It reveals this div (slightly modified to remove my actual URL)
<div id="speedtestmodal" class="reveal-modal tiny open" data-reveal="" role="dialog" style="display: block; opacity: 1; visibility: visible; top: 1130px;" area-hidden="true">
<iframe width="620" height="420" style="visibility:;" id="example" src="https://page.domain.com" scrolling="no" frameborder="0"></iframe>
</div>
This works and the iframe and expected content is visible, the problem I have is that the page in the iframe contains a text box which the user should fill in. This behaves as expected in Firefox but in Chrome or IE attempting to click into the text box closes the entire Iframe.
The website is beta.domain.com and the iframe is page.domain.com so I thought the problem may be related to cross domain JS calls, to try and get around this I added the following to the head on both websites (as described at http://madskristensen.net/post/iframe-cross-domain-javascript-calls):
<script type="text/javascript">
document.domain ='domain.com';
</script>
But it has made no difference. Is there something that I'm missing here?
Is there any more information that I can provide to help debug this?
It turned out the problem was CSS related and it was only working in firefox due to a bug in the browser.
The Z-index value of the modal was causing it to be hidden behind another semi-transparent modal which is part of a separate function of the website.
I have been trying to display PDF inside iFrame, it works well for all other browsers and platforms but not working with iOS. When I tried to access in chrome/Safari in iPhone/iPad, it shows the first page BUT does not allow to scroll down the PDF. And when it comes to HTML inside iFrame, it works perfectly, per my observation it looks like issue is with PDF inside iFrame on iOS. Tried all the links provided on various websites, overflow-auto, webkit scrolling, scrolling only y axis, position absolute/relative increasing the height which results in white pages and all other possible solutions, but no luck yet. The language of implementation is ASP.NET-C# where I am setting the iFrame source dynamically. Below is the source through which I am trying to achieve above task.
<div id="wrapper" class="Sales-container container">
<iframe runat="server" id="Contents" class="myiframe" scrolling="no" width="100%" height="100%" frameborder="0" />
</div>
.Sales-container{position:absolute !important;width:100%}
.container{margin-right:auto;margin-left:auto;padding-left:7px;padding-right:8px}
.myiframe{z-index:0;white-space:nowrap}
Any help would be much appreciated.
Thanks.
If you don't need https, you can use the google docs viewer
make the src http://docs.google.com/gview?url=YOURADDRESSHERE&embedded=true
If that won't work for you, I'm currently looking into pdf.js
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
I have an iFrame that is included in my HTML and is available when the page loads. When the page first loads, the iFrame has no content/src. I am using jQuery to insert content into the iFrame dynamically. When a user clicks a link on my page, the contents of the iFrame are updated. All of this is working for me.
However, I am struggling to adjust the height of the iFrame when new content is loaded. I have tried several solutions on Stack Overflow but with no success. Here is my iFrame code:
<iframe id="myframe" width="100%" frameborder="0"></iframe>
Here is my jQuery that changes the HTML inside of my iFrame:
emailOpened.find('#myframe').contents().find('body').html(email.body);
This works for me. I just need my iFrame to adjust its height based on the height of the content being injected. I have failed on all attempts with this part.
Update
Here is my new HTML:
<iframe id="myframe" width="100%" frameborder="0">
<body onload="parent.resizeIframe(document.body.scrollHeight);">
</iframe>
If you need mobile support and allow (user) scrolling for the iframe check out https://github.com/davidjbradshaw/iframe-resizer a as drop-in solution which fixes different issues on iOS and android.
how to properly display an iFrame in mobile safari
https://encrypted.google.com/search?q=iframe+resize+ios+issue
I had to support mobile devices as well and ended up using it after some hours of research and testing. I've also used the provided message channel to send messages to the inner document back and forth.
Call this function directly after the html has been changed.
function resizeIframe() {
var newHeight = document.getElementById('myframe').contentDocument.body.scrollHeight;
document.getElementById('myframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}