I'm a real amateur when it comes to coding. I'm trying to embed a webpage into a dashboard, just using notepad to write the HTML, got some, but limited, coding experience.
The webpage I'm embedding has fixed items down the page, and so far I've managed to get the page to jump down the page, stopping at each of these articles. Note the site I'm embedding is external - I don't own it.
I've got this HTML code, which includes some javascript to make the iframe the correct size for the embedded page automatically.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dashboardtest</title>
<style>
iframe{
width: 49%;
border: 4px solid #CB0F0F;
}
</style>
</head>
<body onload="pageScroll()" bgcolor="33ACFF">
<h1 style="font-family:Pacifico">Polls... the Results are In!</h1> <iframe src="https://yearbook.com/s/polls/" height="600px" id="myIframe"></iframe>
<script>
// Selecting the iframe element AUTO HEIGHT CODE
var iframe = document.getElementById("myIframe");
// Adjusting the iframe height onload event
iframe.onload = function(){
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</body>
</html>
Previously, I had this code:
<html>
<head>
<title>previousdashboardtest</title>
<meta http-equiv="refresh" content="10">
<script type="text/javascript">
<!--
function pageScroll() {
window.scrollBy(0,392);
scrolldelay = setTimeout('pageScroll()',1000); //Increase this # to slow down, decrease to speed up scrolling
window.setInterval(function scrollWin(){
/// call your function here
}, 5000);
}
//-->
</script>
</head>
<body onload="pageScroll()">
<iframe src="https://yearbook.com/s/polls/" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="100%"
height="45000px" style="padding: 0; margin: 0; border: 0;"></iframe>
</div>
<script>
function scrollWin() {
window.scrollTo(0, 0);
}
</script>
</body>
</html>
It scrolled down perfectly, stopping at each item down the page. But the whole window was scrolling, meaning that the other text I have on the page would scroll out of view.
Hence I embedded the page as an iFrame, and just want to scroll the Iframe.
Is this possible? Or do I need to try some other way.
Ideally in the end I'd like it to scroll down to the bottom of the Iframe, and then loop back to the top indefinitely.
Note: The page I'm embedding requires a login, so best to use some other page if testing.
Related
How can I display the full length of an embedded google document without the scroll bar on the iframe?
<html>
<style>
body { margin: 0; padding: 0; o}
iframe { margin-left: 2vw; margin-top: 2vh; height: 100%; width: 90vw; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<iframe srcdoc="" frameborder="0" scrolling="no" height="100%"></iframe>
<script>
$(function() {
$.get("https://docs.google.com/document/d/17OkIgtNdV1flno_783tJm2xWU0NBh7uEmZ5wEXP2E9g/pub?embedded=true", function(html) {
var contents = $("iframe").contents();
contents.find("html").html(html);
setTimeout(function() {
contents.find('a[href^="http://"]').attr("target", "_blank");
contents.find('a[href^="https://"]').attr("target", "_blank");
}, 1000); // Actually not sure if timeout is required here...
});
});
</script>
</body>
</html>
The display shows maybe a page and half of text and stops.
Google docs is currently happy to serve published documents via CORS requests.
This means that you don't need an iframe to embed your documents. You can instead use an XMLHttpRequest to GET your document and put the response inside a div's innerHtml.
You don't actually even need to make a GET request to accomplish your requirement. If all you're wanting to do is display the full length of the document without having to have a scroll bar, you can use an <embed /> tag with some css.
<embed src="https://docs.google.com/document/d/17OkIgtNdV1flno_783tJm2xWU0NBh7uEmZ5wEXP2E9g/pub?embedded=true" width="100%" style="height: -webkit-fill-available">
When simply added to an HTML page, it will set the height to the full height of the contents of the document, so the only scroll bar you'll have is the scroll bar that is on the browser to scroll down the length of the document. Does this get you what you need?
Here is the test page I have. On this page there is an iFrame with another page from my site embedded.
<html>
<head>
<title>Clickjack test page</title>
</head>
<body>
<p>Website is not vulnerable to clickjacking.</p>
<iframe src="admin.html" width="500" height="500" id="iframe"></iframe>
</body>
</html>
Here is the JavaScript I am using. this code is in admin.html
<script type="text/javascript">
if(window.location != window.parent.location){
// is within an iframe
/* $("iframe").bind('load', function(){
$("iframe").contents().find("body").css('display', 'none');
$(this).hide();
}); */
}
else {
// not within an iframe
}
</script>
The goal here:
When you visit the ClickJacking test page, the html within the iframe should be set to display: none.
I do not want anyone to be able to see the admin page within the iframe.
As you can see, I have several commented out attempts. But no matter what I do, the admin.html is still visible.
Any help is appreciated!
I have 2 iframes on top of each other, 1st is foreground, that user interacts with, and 2nd is background, that is visible only while 1st one is loading. 2nd is unclickable and also the same as 1st, it's there just to fix blinking while the main iframe is loading. My code:
testing here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
iframe.invisible {
display: none;
}
iframe.unclickable {
pointer-events: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID1').on('load', function()
{
$('#iframeID1').contents().find('a[href!="javascript:void(0)"]').filter('a[target!="_blank"]').filter('a[target!="_top"]').filter('a[target!="_parent"]').on('click', function()
{
$('#iframeID1').addClass('invisible');
$('#iframeID2').removeClass('invisible');
});
$('#iframeID1').removeClass('invisible');
$('#iframeID2').addClass('invisible');
$('#iframeID2').contents().find('html').html($('#iframeID1').contents().find('html').html());
});
});
</script>
</head>
<body>
<iframe id="iframeID1" height="800px" width="800px" seamless="seamless" scrolling="yes" src="https://www.w3schools.com/" frameborder="0" class="invisible"></iframe>
<iframe id="iframeID2" height="800px" width="800px" seamless="seamless" scrolling="yes" frameborder="0"class="invisible unclickable" ></iframe>
</body>
</html>
Right now, when I click any link on iframeID1 (foreground), iframeID2 becomes visible, however I see only pure html, no CSS. I think it's because I'm copying only html, how should I be copying css too?
Notice, that iframeID2 does not have src. If I add the same src as iframeID1, it works for a while, until user navigates to different site.
I have embedded a website using iframe.
Whenever the parent page loads, the embedded page makes the parent page scroll down to the iframe. I cannot change any code in the embedded page, only the parent page.
Here's the [fiddle of the issue][1]:
HTML:
<iframe src="http://store.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
CSS:
body { margin-top: 100px; height: 1000px; }
How can I prevent the parent page from scrolling down to the iframe?
IMPORTANT UPDATE: ALMOST THERE
So we've added the following javascript to force the page to scroll bacl to the top:
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
window.scrollTo(0, 0);
window.removeEventListener("scroll", runOnScroll);
}
It does work as you can see [in this fiddle][2]. However, on the iPad and iPhone, you can clearly see the page scolling back then up again. On the PC, you can't see the transition.
Please visit [this website][3] so you can check both transitions (pc and mobile).
I'd like to know if there is anything we can add to the code so:
the transition in mobile is not noticed like in the pc (preferred choice)
OR
the transition is smoother (slower scrolling or something like that)
Ok, I added a bit of JavaScript that listens to the first time the document is scrolled down. When the document is scrolled down for the first time, it'll force itself back to the top, then it'll remove the listener so that the user may scroll as desired afterward.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css"></link>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<iframe src="http://store4549118.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
<script src="scripts.js"></script>
</body>
</html>
JAVASCRIPT (In a file named scripts.js)
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
$('html,body').animate({scrollTop: 0},1000);
window.removeEventListener("scroll", runOnScroll);
}
Give it a shot, and let me know if it works!
The question is on iframes/bookmarkablity and back button functionality.
This issue I am facing is how to create iframes with bookmarkable url's without loosing the back button functionality.Lets say all the pages are in the same domain and the child pages inform parent of the child page load for updating the window.location.hash property to modify the current browser address bar.
The updation of the url works fine on IE/FF/webkit. But the back button works as expected in IE-8 but the browser back-button does not work in FF/webkit (just the url changes the previous page is not loaded). If we don't update the window.location.hash property the back button works but the window url is not meaningful.
Is there a way to get this functionality accross browsers, or is there an easier better way to do it (any other js libs). All pages are served from the same server to get around the permission issue.
The following files are
index_parent.html (contains the iframes)
son.html
grandson.html
son and grandson are linked and any navigation between son and grandson in the parent iframe updates the address bar but breaks the back button in FF.
cat index_parent.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Parent</title>
<style>
body{
margin:0;
overflow: hidden;
}
iframe {
border: 1;
height: 100%;
width: 100%;
overflow-x: hidden;
}
</style>
<script language="javascript">
function update(url,title){
alert("parent_update")
document.title=title;
window.location.hash ="#" + url; // comment this to get the back button working
//in FF/webkit --but makes the url non bookmarkable
}
function parent_loader(){
alert("parent_loader")
if (window.location.hash.substr(1)) {
document.getElementById("embedframe").src=window.location.hash.substr(1);
} else {
document.getElementById("embedframe").src="son.html";
}
}
</script>
</head>
<body onLoad="parent_loader()" >
<H1> Parent</H1>
<iframe name="embedframe" id="embedframe" src="" frameborder="1" ></iframe>
</body>
</html>
cat son.html
<html>
<title> son </title>
<script language="JavaScript">
function son_loader() {
alert("son_loader");
if (self.location.href!=top.location.href) {
parent.update(location.href, document.title);
}
};
</script>
<body onload="son_loader()" >
<H1> son </H1>
<a href="grandson.html">Grandson < /a>
</body>
</html>
cat grandson.html
<html>
<title> grandson </title>
<script language="JavaScript">
function grandson_loader() {
alert("grandson_loader");
if (self.location.href!=top.location.href) {
parent.update(location.href, document.title);
}
}
</script>
<body onload="grandson_loader()" >
<H1> Grandson </H1>
Father
</body>
</html>
You can set the destination of the Back button in your loader function explicitly using history.pushState, as described here:
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history