I have a website with an iFrame on it that loads fine when I am on a desktop browser, but not on iOS (I haven't tried any other mobile OS's). The code I used for the iFrame is
<div data-role="content">
<iframe src="http://hungrcraft.co.nf/" width="100%" height="100%" frameborder="0" scrolling="auto" style="position: absolute;top: 0;left: 0" seamless>
</iframe>
</div>
along with
body, html
{
margin: 0; padding: 0; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0;
}
in a css/text style tag.
As I said earlier, this loads on desktop web browsers, and in IE11 emulations, but not on iOS (tested 3.1.3-7.0.4). Is there something I did wrong? Is this a bug with iFrames? HTML? HTML5? Something else?
Try embedding the iFrame, it's a push but it may work.
<embed src="http://hungrcraft.co.nf/"</embed>
P.S I have tried on my iTouch 5, it's loading fine for me.
EDIT: Looks like you have a redirect loop. On hungrcraft.co.nf/mobile#page5 you have an iframe for hungrcraft.co.nf. However, it appears that hungrcraft.co.nf detects if you are on a mobile device which redirects the iframe to http://hungrcraft.co.nf/mobile/?url=http%3A%2F%2Fhungrcraft.co.nf%2F displaying your mobile page in the iframe that was supposed to show your homepage.
Original Post:
What device are you using? That site you linked pulls up fine in my iPhone 5 with iOS 7.0.4.
Related
I am trying to open pdf files in an iframe by also using parameters to control how the pdf is opened. They work great on the website, but they don't seem to work on electron: the pdf is opening inside the iframe, however, the zoom level specified by the 'view=fitH' does not seem to work in electron. Is there any way to make the parameters work in electron too? This is the code that I am using.
<iframe src='./res/test.pdf#page=1&toolbar=0&statusbar=0&messages=0&navpanes=0&scrollbar=0&view=fitH' frameborder="0" style="width:72.5%;height:95%;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></iframe>
Update:
I will try to offer more details of what I'm trying to do. I'm building the app from macOS Sierra and the end goal is to have a local app for windows which can be used instead of the online app when there is no internet connection. I am using the following command to build the app:
electron-packager ./ --platform=all --arch=all --overwrite --asar
However, the pdf is not fitting the width of the iframe as it should, but is instead zoomed out like in the following image:
The actual result - you can see that the pdf is zoomed out a lot
I will try to build the app from windows and see if that solves the issue.
I see this working just the same way as in browsers
main.js
const {app, BrowserWindow} = require('electron')
app.once('ready', () => {
let win = new BrowserWindow({
webPreferences: {
plugins: true
}
})
win.loadURL(`${__dirname}/pdfargs.html`)
})
pdfargs.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<iframe src='./res/test.pdf#page=1&toolbar=0&statusbar=0&messages=0&navpanes=0&scrollbar=0&view=fitH' frameborder="0" style="width:72.5%;height:95%;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></iframe>
</body>
</html>
I found out what the problem was. I was breaking the rule:
Individual parameters, together with their values (separated by & or #), can be no greater then 32
characters in length.
I am now using page=1&toolbar=0&view=fitH and it works like expected now.
I don't know why it worked in browsers even though I was using more than 32 characters, but I guess there is an exception to every rule.
I am experiencing a weird issue with iframes displayng on some phones and not displaying on some phones.
(Displays on all androids)
(Does not work on iphone 6,7 but works on 7 plus and the 7S and a few other iphones)
<div class="col-lg-6 col-md-6">
<iframe src='http://app.brandyourcar.com/signup/index/form-main-display-group-thingy' style='border: 0;' width='100%' height='770px' scrolling='no'></iframe>
</div>enter code here
I have tried a lot of the solutions on Stack and none seem to work for me.
few examples :1.) <div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="url" />
</div>
2.) <div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="data/testdocument.pdf" />
</div>
and many other Java script solutions.
This happens because the latest versions of safari have a new security feature called "prevent cross site tracking" enabled by default that doesn't allow the third party cookies. The user can disable this, but I'm trying to find a workaround to avoid the user intervention. For now, you can detect if the third party cookies are allowed and if not you can display an alert message saying how to disable this feature.
I hope it helps.
I am working on a legacy application which works in ie but not in Safari.
The image in the code will not render in Safari.
<section class="feature pointer clickableSection tooltipContainer" id="SearchSection"
data-scd-nextScreen="#Url.Action("FullSearch", "Company")"data-placement="bottom"
data-toggle="tooltip" data-title="Click here to SEARCH Addresses">
<img src="#Url.Content("~/images/phonebook.png")" alt="Click here to SEARCH Addresses" />
<h3><span style="text-decoration: underline">Search Addresses</span><span id="searchHeading"></span></h3>
<div class="loadMessage"></div>
</section>
I have got the Safari Web Inspector up and running, but I cannot see where I can find out where the problem is. I am new to using this tool.
I found where the problem is.
In my CSS which I did not publish, it has;
section.feature img {
color: #999;
/*content: attr(alt);*/
font-size: 1.5em;
font-weight: 600;
height: 140px;
width: 200px;
}
I have commented out the line that is not compatable with Safari, ie content: attr(alt);
I saw this thread Embed Youtube subscribe counter? and I am wondering where does this button come from ?
I asked it on that thread but I don't think anyone noticed that
I tried some code for myself but this gives a js error Uncaught Error: Bad hint
<iframe data-gapiattached="true" frameborder="0" scrolling="no"
src="http://www.youtube.com/subscribe_embed?bsv&usegapi=1&channel=HERE CHANNELNAME"
style="overflow: hidden; height: 24px; width: 170px; border: 0;">
</iframe>
It looks like a plusone.js button but nothing to find.
Hope someone can shine some light on this youtube channel subscribe button :-)
only change this - channel=HERE CHANNELNAME
UPDATE:
Above is not the right embed code. It is a part of the plusone.js code from google
The right embed code is:
<div class="g-ytsubscribe" data-channel="CHANNELNAME"></div>
<script src="https://apis.google.com/js/plusone.js"></script>
This works but still no documentation found so if anyone knows where to find the official code please let me know
I'm developing a blog app, and using windows live writer 2011 to embed a YouTube video is pretty straight forward, but I've encounter a strange issue. Here is what I did,
I copy a link from the YouTube site, for example, http://www.youtube.com/watch?v=3Kk-yZ7VpeA
From WLW I insert video From the web and paste the link in it
WLW shows the video without any problems
I view Source in WLW, it gives the following html <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:bb7a51da-b141-42e1-9e93-72967dd2f73d" class="wlWriterEditableSmartContent"><embed src="http://www.youtube.com/v/3Kk-yZ7VpeA?hd=1" type="application/x-shockwave-flash" wmode="transparent" width="448" height="252"></embed></div>
All these are working fine with preview and everything, but when I publish it, it shows up a black squaure of image instead of the video on my site. Moreover, the html WLW sent to the server is the following: <div style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;float:none;padding-top:0px;" id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:bb7a51da-b141-42e1-9e93-72967dd2f73d" class="wlWriterEditableSmartContent"><div id="7bd0cee8-cce8-4b10-8833-6e30cefafd64" style="margin:0px;padding:0px;display:inline;"><div><img src="http://127.0.0.1:10000/devstoreaccount1/ray/blog/image/2011/05/videob8758375cccf.jpg" style="border-style:none;" alt="" /></div></div></div>
Note the "embed" tag was no longer there and an "img" was instead created. I don't really know why WLW sent what it sent and how to fix this issue, could someone help point out please.
Thank you so much!
I got it figured out. I added
<supportsEmbeds>Yes</supportsEmbeds>
to wlwmanifest.xml file. Without this line, WLW shows the blog capabilities for "Embeds" as "Unknown" and it messes with the embed tag.