IFrame wont go fullscreen - html

so i'm making a shell shockers site for my friends in school, and it wont go fullscreen
this is the code iv used. whats wrong??? (I'm sorry if its a simple fix but I used what I saw online to allow this and it doesn't work)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="https://playminigames.ru/en/embed/shell-shockers" style="width: 1200px; height: 700px;" frameborder="0" allow="fullscreen" object-fit:screen;></iframe>
</body>
</html>

Related

Hide "!DOCTYPE html" in iframe

We managed to embed a html-table with iframe. At the very top of the table you can read "!DOCTYTE html". What do I have to include in the iframe-command that this "!DOCTYTE html" doesn't show up anymore?
My code so far:
<iframe src="http://test/positiveFaelle.html" scrolling="no" seamless="seamless" frameBorder="0" width="900" height="485"></iframe>
The result:
It's a problem with your test/positiveFaelle.html file.
The content should look something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
If in your file you have <!DOCTYPE html> it wont work.
Hope this helped.

Make WolframAlpha iframe redirect to website

So I added WolframAlpha as a frame into a webpage (deleted the rest for the time being) and was wondering if there was a way to have search results open on the actual WA website.
ex. If I type 1+1 it will open me https://www.wolframalpha.com/input/?i=1%2B1
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<style type="text/css">
body {
overflow:hidden;
}
</style>
</head>
<body style="height: 100%;margin:0;padding:0">
<iframe src="https://www.wolframalpha.com/" scrolling="no" frameborder="0" style="width: 50%; height: 100%;"></iframe>
</body>
</html>
Currently it just opens the search result on the page
No.
Only Wolfram Alpha can control the target of their links and forms.

embedd webpage into html document not working

I am trying to embedd a webpage from a cisco satellite device into a div tag of my webpage but I am getting the following problem
The page loads properly with the logon screen but as soon as I enter the login details it does not login byut instead stays on the login screen. I have tried both div and Iframe and both give me the same results. However when i access the device directly on IE or Chrome it works fine. The problem is only within my iframe or div.
My samle code is below however since you dont have access to the device you may not be able to see it working.. A shot in the dark here just asking you all to please give me some stuff to try out
<!<doctype html>
<html lang="en">
<body>
<div style="margin: 0 auto; width: 100%; height: 100%;">
<object type="text/html" data="http://192.168.10.107/"
style="width: 100%; height: 100%; margin: 1%;"> </object>
</div>
</body>
</html>
I also tried this with iframes as under but that also failed to work
<html>
<iframe src="http://192.168.10.107" sandbox ="allow-same-origin allow-scripts allow-popups allow-forms" width=100% height =100%></iframe>
</html>
Here I have a page that is like the one you want I guess.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MyTitle</title>
</head>
<frameset rows="0,*" border="0">
<frame name="header" scrolling="no" noresize target="main">
<frame name="main" src="http://192.168.10.107/">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

html <object> being clipped although height=100%

I am using the following code to embed a pdf in a webpage:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<object data="http://fluencycontent-schoolwebsite.netdna-ssl.com/FileCluster/StGeorgesBritishInternational/Mainfolder/Admissions/1407-Application-Form_Admissions.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="26"><p>This browser does not support PDFs. Please download the PDF to view it: Download PDF.</p></object>
</body>
</html>
However the embedded document will be clipped as the height will be set to a value that wil clip the object. Forcing size in pixels will fix the problem. How is that?
Make you tests here as jsfiddle will fail to deal with <object>
The page itself needs a size assigned to it.
set the style appropriately for your page.
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
*{height: 100%;width: 100%}
</style>
</head>
<body>
<object data="http://fluencycontent-schoolwebsite.netdna-ssl.com/FileCluster/StGeorgesBritishInternational/Mainfolder/Admissions/1407-Application-Form_Admissions.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="26"><p>This browser does not support PDFs. Please download the PDF to view it: Download PDF.</p></object>
</body>
</html>

Jump Link Inside an iFrame

Inside an iframe (on page-A), I have a simple page (page-B) that has a few jump links (e.g. jump link) to different sections of the page (page-B). The iframe height is preset to be longer than page-B's height; this is a requirement.
For some reasons, the jump links didn't work on FF (I am on Mac/FF 10.0.2); however, it worked properly on Safari and IE8. This is the sample page.
Code of page
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jump Link Test on an iFrame</title>
</head>
<body>
<h1>Page that has an iFrame</h1>
<iframe width="100%" height="2000" src="./iframe.html" frameborder="0" scrolling="no">
</iframe>
</body>
</html>
Code of iframe.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>iFrame Content</title>
<style type="text/css">
.box {
margin: 0 0 5px;
width: 400px;
height: 400px;
}
#box1 {
background-color: #f00;
}
#box2 {
background-color: #f0f;
}
#box3 {
background-color: #00f;
}
</style>
</head>
<body>
<ul>
<li>Box 1</li>
<li>Box 2</li>
<li>Box 3</li>
</ul>
<div>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
</div>
</body>
</html>
Note: If I set the iframe height < page-B's height, the problem will be solved. However, unfortunately this isn't an option given my situation because I have no access to page-A.
This is not possible with HTML only.
As you can read on the Firefox Bug Report Nr. 638598 this is mentioned long time ago! Also many people don't like that behavior, but Jonas Sicking says in his comment that this will never change. He sees that as a feature that firefox prevent this potential hacking functionality.
if you don't know him read here that he is the Tech Lead of the web-api project at mozilla as well as an editor for the indexeddb and file-api specifications at W3C.
Other people tried to find solutions like Matthew but this example didn't work in my short test case with your html structure. Some others say that it should work with JavaScript and the scrollTo() Function.
I'm sorry for saying that this is a limitation of FireFox only, but hope you are happy to be safe in the knowledge about that problem.
I already ran into this issue. In my case I could not use a javascript solution because my iframe was in a different domain and I had no access to the parent page.
But there is a HTML workaround.
Change your link from this:
jump link
To this:
<a target="_parent" href="http://parenturl.com/#my-id">jump link</a>
And create a invisible <div id="my-id"></div> in your parent page and position it using CSS.
Mmm, just a thought, have you reset margins for the iframe? FF tends to do weird things when you don't explicitly specify margin attributes.