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.
Related
I have built an Electron application which downloads files from Sharepoint. This works flawlessly. Soon the files will be transferred to Windchill and only be available there. When I substitute the download link with the link from Windchill, it doesn't work, although the link works inside the browser.
My app loads the index.html
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main class="main_window">
<iframe src="example.html" ></iframe>
</main>
</body>
</html>
which then loads the example.html into an iFrame
<!DOCTYPE html><html lang="de" dir="ltr"><head>
<meta charset="utf-8">
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head><body>
<main>
SharePoint link
Windchill link
</main>
</body>
</html>
When I click the SharePoint link, the download starts, but when I click the Windchill link, nothing happens. In Chrome I get redirected a few times, when I click the Windchill link. Does maybe this redirection not work in iFrames? If yes, what simple embedding alternatives to iFrames do I have? I already tried
<object src="example.html" ></object>
<embed src="example.html" ></embed>
both with the same result.
I have an entire React application that I am hosting on AWS. I want to embed this application in to another non React site. Currently I have it iframed in and it works fine.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
</head>
<body>
<iframe src="https://testlink.cloudfront.net"></iframe>
</body>
</html>
I have seen examples in the React docs around implementing individual components without iframes but nothing around entire hosted applications.
Idealy I will be able to do something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
</head>
<body>
<div="app"></div>
<div="app2"></div>
</body>
</html>
What's the best approach to do this or am I best to just deal with iframes?
I had to integrate multiple react apps into a cake php framework.
Place the final bundle in webroot of the hosted site e.g under /react.
Then just include the final bundled script tag in the html.
You will have to handle the routing to the app on the hosted site.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
...
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="ReactAppDiv"></div>
<script type="text/javascript" src="/react/main.js"></script>
</body>
</html>
We are building a site, and when we run it on our local servers (Our private wifi 10.0.0.whatever) it worked fine.
Now we uploaded the site online, and when opening the sites on our mobile the scale is PC scale.
We already are using the tags:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
We do not understand whats the problem... The site is responsive.
Any thoughts?
The site is implmented in AngularJS and using bootstrap library.
An image for reference.... from W3schools.
This is the start of my head div:
<!doctype html>
<html lang="en" dir="rtl" ng-app="siteNameApp" style="padding-bottom: 80px;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>siteName</title>
<script src="lib/angular/angular.min.js"></script>
Even though what #Ajay said was the right answer, in my case, the site view was wrong because Go-daddy domain warped our site with their own HTML Header.
Make sure the site header is your own and not someone else's.
As Ajay said, the meta div should be in the index header
<meta name="viewport" content="width=device-width">
I'm using an FTP, and added some simple code to a website. On my desktop within this server, I can't view the content. I've tried Firefox, IE and Chrome. On my phone I can, and tech support could also view the content. I've cleared all cached data, but still nothing. Does anyone have any suggestions?
When I type in www.site.com/index.htm, the content will display on the desktop. When I just type in www.site.com, it won't. When I type in www.site.com on my phone, it will display.
This is the code displaying on my site:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Milani Reviews</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>fasdfaskl</p>
</body>
</html>
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!