My application opens in an iframe..
$(window).scroll(function() { alert("scroll is");});
if i run this code without iframe it works but with iframe it does not work
The following is the content of an HTML file I include in an iFrame, the Javascript gets called correctly. Perhaps compare it to what you have written.
<html>
<head>
<title>Test iFrame</title>
<!-- Add Some Space to Simulate Content (not needed) -->
<style>
body {
width: 100vh;
height: 100vh;
}
</style>
</head>
<body>
<p>iFrame content goes here</p>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
// wait for jQuery to load
$(document).ready(function() {
$(window).scroll(function() {
alert("scroll is");
});
});
</script>
</body>
</html>
Related
I am going to print a page without loading that page. As I searched in stack overflow I found the following example the best.
But the problem here is that I cannot pass any parameter using the src attribute.
Now, I am looking for a way to pass a parameter to an external page and then print that page without loading that page.
If anyone can help me I will be thankful but please do not mark my question as a duplicated question.
<html>
<head>
<title>Index</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#loaderFrame').load(function(){
var w = (this.contentWindow || this.contentDocument.defaultView);
w.print();
});
$('#printerButton').click(function(){
$('#loaderFrame').attr('src', 'print.php');
});
});
</script>
<style>
#loaderFrame{
visibility: hidden;
height: 1px;
width: 1px;
}
</style>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<iframe id="loaderFrame" ></iframe>
</body>
</html>
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!
fairly new to js. I have a simple project in which all I have is an image twice the height of the screen. I want the webpage to open at the bottom of the page, so I have added the "window.scroll" funtion method in javascript. This works fine... most of the time. Sometimes, particularly if I test on a mobile device with a home server, the javascript just doesn't fire up and the page starts at the top. So my main question is: is there a way to do the same as "window.scroll" but with CSS, bypassing js altogether? And a second question I would have is, why is javascript so flaky? I am really new to web development and I have already twice (the other time with the "slide" method) had to use css instead of js because js doesn't work properly, or it needs to be cached etc... is this normal behaivour or just me really bad at writing it at this point? Thanks for your time. P
Here's the simple code:
$(document).ready(function(){
window.scroll(0,2000);
});
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455_960_720.jpg" width="100%" style="display: block;">
</body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
}
JavaScript:
$(document).ready(function(){
window.scroll(0,2000);
});
I think the problem is that the image takes time to load.So I think your event is fired however the image loads later and changes the page size again. The load event will fire after images are loaded.
try this code instead:
$(window).on("load", ,function(){
window.scroll(0,2000);
});
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a id="myLink" href="#">
Click to slide in new page
</a>
<iframe id="newPage" src="http://jsfiddle.net"></iframe>
</body>
</html>
And here is my CSS:
#myLink {
position: absolute;
}
iframe {
width: 100%;
height: 100%;
top: 100%;
position: fixed;
background-color: blue;
}
And my JavaScript:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am literally copy and pasting from this source http://jsfiddle.net/TheGAFF/hNYMr/ to achieve a transition between web pages using iframe but for some reason when I try this simple code in my browser, it doesn't work. I can't see why this doesn't work in my browser when I link it to index.html. Can anyone help? Thanks.
Edit: The "#myLink" in the CSS page isn't commented out, it just happened to format like this in the question.
Look in your JavaScript console. Expect to see an error about $ not being defined.
See this code:
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
First you load your script, which tries to use $. Then you try to load jQuery, which defines $.
Swap the order or your script elements.
You then have a second problem.
$("#myLink")
You have no element with id="myLink" in the document at the time the script runs.
It doesn't get added to the DOM until 4 lines later.
Either:
move the script so it appears after the elements you are trying to access
use an event handler (like DOM Ready):
Such:
$( function () {
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
} );
use delegated events
Such:
$(document).on("click", "#myLink", function () {
$('#newPage').transition({top: '0%' });
});
Edit; sorry you already did that.
Try puttting your js file Under the js library file.
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