Here is my issue :)
Check out the two following sites on IE 9, or on a smartphone:
[link disabled]
[link disabled]
As you can see, the second website does not work properly (background, buttons and js do not work, etc.). The code behind both is exactly the same (using bootstrap, jquery, etc.), with one difference: for some reason I need a nice URL and cannot change my host (villice.be), which is why I asked ovh to re-direct eneco.creo2.org to the first URL (villice.be/...).
When I look at what OVH is doing, they wrap my documents by adding a frame and frameset in this way:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="ORT - Ovh Redirect Technology">
<meta name="url" content="http://villice.be/creo2/eneco/www">
<meta name="robots" content="all">
</head>
<frameset rows="100%,0" frameborder=no border=0>
<frame name="ORT" src="http://villice.be/creo2/eneco/www">
<frame name="NONE" src="" scrolling="no" noresize>
<noframes>
<body>Click here<hr></body>
</noframes>
</frameset>
</html>
I guess this frame is the cause of the following bad displays:
On desktop: works fine with Chrome, but not with IE 9. The troubles seems to be: part of the javascript is unloaded, css unloaded (?)(e.g., background-image:cover does not work), etc...
On smartphone: no responsiveness (smartphone seems to think he is a desktop), even on chrome
potentially other display errors
Is there a workaround around this, knowing that I do not control the code ovh is adding? Maybe I can try to change it with jQuery after the document is loaded?
Any input is welcome :)
Thanks!
Related
I was following a jQuery tutorial and part of it was to use something that took a long time to load, such as iframes. I can't get iframes to work by themselves, in the following only w3schools works. What is going on?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>This is a test</title>
</head>
<body>
<p>Hello.</p>
<p>
<iframe src="http://www.google.com"></iframe>
<iframe src="http://www.stackoverflow.com"></iframe>
<iframe src="http://www.w3schools.com"></iframe>
<iframe src="http://www.yahoo.com"></iframe>
<iframe src="http://www.reddit.com/"></iframe>
</p>
<p>Goodbye</p>
</body>
</html>
Are there any other easy ways to have something take a long time to load in a HTML document? I tried using large images but it's a nuisance to download many of them and they get cached after first time.
The reason for this is, that Google/Satckoverflow is sending an "X-Frame-Options: SAMEORIGIN" response header. (You can set this thing either in IIS or in Page Header) This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.
The X-Frame-Options response header
I have multiple domains who redirect to the same responsive website by iFrame.
The problem is, when I visit these website's on a mobile device, it's not longer responsive.
The original website, http://m.isero.nl/, works perfect.
But it's not longer responsive when I use a domain who redirect by frame, like http://iseroijzerwarengroep.be/.
How can I make this website responsive to mobile devices inside an iFrame?
I tried this in my css:
iframe, object, embed{
width: 100%;
height: auto;
}
But no success.
The problem is that your parent sites don't have the appropriate viewport meta-tag in the <head>. That tag is present in the child site:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Create a .php document and upload it to your hosting. Don't create a frame forward in your domain setting, but point the domain to the created .php document. Then use the following code in your .php document to create the frame forward there.
<html>
<head>
<title>Your Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-
scale=1.0; user-scalable=0">
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
</head>
<frameset rows="100%" border="0" framespacing="0" frameborder="0">
<frame name="main" src="https://your-target-domain.com/" marginwidth="0"
marginheight="0" scrolling="auto"
noresize="noresize">
</frameset>
<noframes>
</noframes>
</html>
I created a link to a favicon as well. You can take this line out if you dont need it. If you need it, simply upload your favicon as "favicon.ico" into the same directory as the .php file.
Now you have a mobile responsive frame forwarding :)
The PHP method recommended by Timm worked like a magic. Check https://shop.wavessystems.com/ redirecting to https://shop.wati.io/075a04d0-5098-4d8f-ad9d-d34e048666c5 without affecting the responsiveness on mobile view.
On pages containing multiple SoundCloud iframes, a random subset of those iframes appear invisible in both Chrome and Firefox, and instead of containing the normal SoundCloud content they contain the following HTML. The iframes affected often change with each page load, and youtube iframes on the same page are unaffected. Does anyone know the cause and/or a workaround?
UPDATE: On further examination, this is standard SoundCloud content, except div id="widget" is empty, and a manual iframe reload on an individual iframe forces it visible. Is this maybe a situation where the iframe is first loaded, then the div content is fetched with an XHR, and on a page where the browser is laboring over numerous loads on a congested network some XHR's silently time out? If so SoundCloud, could you increase your XHR timeout?
UPDATE 2: I tested this some more on 2 separate machines on the same LAN, and it looks like it might be a problem with the current version of the standard Flash plugin (11.5.502.110 on winXP--installed by auto-update Nov.9, about when this started, and 11.2.202 on Ubuntu 12.04--installed today, Nov. 27). The following information should make it reproducible. I get 100% consistent failures in Firefox on both machines, and I can toggle the failures on and off in Chrome (on both machines) by enabling the standard plugin vs. Chrome's own PepperFlash plugin. There are 100% no failures with PepperFlash, but the current version of the PepperFlash player is unusable because of impossibly choppy audio.
<html lang="en">
<head>
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>SoundCloud Widget</title>
<base target="_blank">
<link rel="stylesheet" href="/player/assets/widget-22748325.css">
<script src="/player/assets/widget-ab572693.js"></script>
<script>
require(["lib/support", "lib/flash-widget"], function(support, flashWidget) {if (support.newWidget) { require(["application"], function(A) {A.start("207ad5d2")}) } else { $(flashWidget.start); }});
</script>
</head>
<body class=" hasGoogleVoiceExt">
<div id="widget" style="height: 100%;"></div>
<div id="sm2-container" class="high_performance swf_error" style="z-index: 10000;"><embed name="sm2movie" id="sm2movie" src="/player/assets/swf-8bc33658/soundmanager2_flash9.swf" quality="high" allowscriptaccess="always" bgcolor="#ffffff" pluginspage="www.macromedia.com/go/getflashplayer" title="JS/Flash audio component (SoundManager 2)" type="application/x-shockwave-flash" wmode="transparent" haspriority="true"></div>
</body>
</html>
I just had a look at this again after giving Adobe a couple of months to get their act together, and the problem is now gone in Chrome and Firefox on XP with version 11.5.502.149 of the Flash player. I haven't checked Ubuntu, but presumably they pushed the change out there too.
I'm trying to load a page from my website into an iframe in another page, which I'm currently running on localhost. Unfortunately, it's not working. I've tried loading other pages from youtube, heroku (where my page is hosted) etc. and they all work fine, it's only content specifically from my website that's not loaded. Any ideas why?
The code for my page is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<h1>hi</h1>
<iframe width="560" height="315" src="http://www.karmielfolkklub.com"></iframe>
</body>
</html>
The page http://www.karmielfolkklub.com is sent with HTTP headers that say:
X-Frame-Options: sameorigin
This means that browsers are not allowed to display the page in an inline frame, unless the page containing the iframe element is in the same domain. Modern browsers generally obey this.
Changing this depends on the server settings or on the server-side code used to generate the page.
I have a site hosted on a commercial provider and all site were developed on /portal folder.
Until today I redirect the site using frameset:
<html>
<head>
<title>Titulo</title>
<meta name="google-site-verification" content="xxx" />
<meta http-equiv="Content-Language" content="pt-br">
<meta name="description" content="xxxx">
</head>
<FRAMESET>
<FRAME SRC="http://www.test.com.br/portal" NORESIZE>
<body></body>
</FRAMESET>
</html>
Now, the host provider suggests me to use:
<script>window.location='http://www.test.com.br/portal';</script>
Is this faster or better than the frameset approach ?
Is Google or other search engine will continue to search for the content?
You have different ways to redirect to another page. If you're using a server-side language like php you can use this (before the headers has been sent):
header("Location: http://www.test.com.br/portal");
using HTML you can do this:
<meta http-equiv="refresh" content="0;url=http://www.test.com.br/portal">
Using Javascript you can do this:
<script>window.location='http://www.test.com.br/portal';</script>
The best way, in my opinion, is the first because of you can also specify the type of redirect (permanent or temporary) and this is better from a SEO point of view. Google and the other search engines will be able to crawl your page easily if you choose the first solution.
Just add this tag to the head section
<meta http-equiv="refresh" content="0; URL=http://www.test.com.br/portal"/>
For some reasons it's better than using framesets.
In addition to
<script>window.location='http://www.test.com.br/portal';</script>
you can put a link to that page into your HTML body, something like this:
<p>You will now be redirected to another page.<br/>
If it didn't happen, use this link:
http://www.test.com.br/portal</p>
But the solution with php's header function (Aurelio De Rosa's answer) is better indeed.