I have 2 pages. I loaded my second page inside my first page.
In the second page i have a link.
The problem is, when I click on the link in the second page, it opens in new tab.
How do I open this link in same page, like an iframe?
Here is my snippet:
$( document ).ready(function() {
$('#second').load('second.html');
});
#second{width:100%; height:300px; border:1px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>First page</title>
</head>
<body>
<div id="second"></div>
<!--
THis is my second page code ////////
<html>
<head>second page</head>
<body>
click here !
</body>
</html>
-->
</body>
</html>
Name your iframe <iframe name="namedIf"></iframe>
and then in your anchor tag use target attribute <a href="link" target="namedIf"/>
But as the comments says, google doesn't allow you to iframe their content in your site.
UPDATE
As you're not using iframes, the only thing i can think of is to "intercept" any clicks to the anchor tags present on your loaded document and use the same function again to load it.
$(function() {
$('#second').load('second.html', function(){
$("#second a").click(function (e) {
e.preventDefault();
$("#second").load($(this).attr("href"));
});
});
});
So the code gets executed when your code has completed loading second.html into your document.
Related
When particular page is opened by clicking on button which id is "button1", I want that page to be scrolled down.
Could that code be in JavaScript?
This is the command you can use to scroll down:
window.scrollTo(0,document.body.scrollHeight);
Now if you want to go directly to the bottom you can put this do that while the page are loaded:
<body onload="window.scrollTo(0,document.body.scrollHeight);">
Here is an example of what you are asking about:
<html>
<head>
<script>
clicked(){
var element = document.getElementById("scrollto");
element.scrollIntoView();
}
</script>
</head>
<body>
<button onclick="clicked()">Click Me</button>
Your content...
<div id="scrollto"></div>
</body>
</html>
When you click the button, it should scroll down to the div.
If you are asking about navigating to a new page and automatically having it scroll to the right section, you can do something like:
and the link will automatically open to that section of the page.
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!
Open JavaScript:- this code isn't editable as it is locked by the Host! So also I can't add any selector inside it!
But I can add another code outside of it. Like:- <ex ex="ex">Open JavaScript</ex>
So, I want to create a <script src="/javascript.js"></script> by fetching the URL from Open JavaScript.
They also didn't allow PHP there, otherwise I could do it myself. There is only one way to do it via JavaScript.
And I don't want to add the script inside <head> tags! It should be in the footer (<div class="body-footer"> Here </div>). There are not only one JavaScript link in the page, there are so many JavaScript links. So also I can't use $("a[href$='.js']");. Its became more tougher for me.
So how can I do this using JavaScript or jQuery?
Here is my implementation, where <script> tag is added before <a> with value of href.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var hrefValue = $("div#test a").attr("href");
$("div#test a").before("<script src='"+hrefValue+"'><\/script>");
console.log($("#test").html());
});
});
</script>
</style>
</head>
<body>
<div id="test">
Open JavaScript
</div>
</br></br>
<button>CLICK it, to add href value of anchor tag to newly created sibling element</button>
</body>
</html>
I need to run JavaScript code in iframe. But script with id "us" loaded after creating iframe. How to run this javascript in iframe?
<iframe id="preview">
#document
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script id="us" type="text/javascript">
$("#preview").ready(function() {
$(".test").click(function() {
alert(true);
});
});
</script>
</head>
<body>
<style></style>
<div class="test"></div>
</body>
</html>
</iframe>
Thanks in advance.
The IFrame has no access to what's outside of it. Everything inside IFrame is separate page ergo you threat it like so. So you do your document.ready in it.
Example: http://jsfiddle.net/ZTJUB/
// Since this is page you wait until it's loaded
$(function() {
$(".test").click(function() {
alert(true);
});
});
The jQuery instance inside of the iFrame doesn't know it's supposed to be traversing the parent DOM, so therefore it won't know where to look for an element with the id "preview"
As per my comments above, you should attach to the iframe's document.ready, like this:
// Since this is page you wait until it's loaded
$(document).ready(function() {
$(".test").click(function() {
alert(true);
});
});
EDIT:
Just realizing you are probably having an entirely different issue here - Html code as IFRAME source rather than a URL - if you are trying to embed the iframe code inline, you are going to have problems. Take the following code for example:
<html>
<head></head>
<body>
Some stuff here
<iframe id="preview">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script id="us" type="text/javascript">
$(document).ready(function() {
$(".test").click(function() {
alert(true);
});
});
</script>
</head>
<body>
<style></style>
<div class="test">test</div>
</body>
</html>
</iframe>
</body>
</html>
if you render that page in firefox, and then inspect the source in firebug, you'll see:
<html>
<head></head>
<body>
Some stuff here
<iframe id="preview">
<html>
<head></head>
<body></body>
</html>
</iframe>
</body>
</html>
This is happening because the browser isn't expecting to see the code inline between the iframe tags.
Since you're not addressing the questions in the comments to better clarify what you are trying to do... I shall assume you are trying to access content IN your iframe FROM your parent page. Since the other answer should work fine if trying to run it from within the iframe.
On the parent page try something like:
$(function() {
$("#preview").load(function ()
$("#preview").contents().find(".test").click(function() {alert(true);});
});
});
*This assumes both parent and iframe are on the same domain.
I have a page where when you click a tab with text, you are linked to a different page with an expanded description contained within a white block. On this page, I want the user to be able to return to the previous page by clicking anywhere in the background (not on the white block). Right now, clicking anywhere on the page with the expanded description links back to the main page (when it should be ignoring clicks on the white div containing the description). Here's my javascript:
$('html:not(.detailwhite)').mousedown(function(e) {
document.location.href="index.html";
e.stopPropagation();
});
And here's my html:
<!DOCTYPE html>
<html>
<head>
<title>Group details</title>
<!--library files-->
<script src="lib/jquery_min.js"></script>
<!--stylesheets-->
<link rel="stylesheet" type="text/css" href="style/detailstyle.css">
<!--javascript-->
<script type="text/javascript" src="js/interactive.js"></script>
</head>
<body class="detailbg">
<div class="detailwhite">
<h1 class="name">Group Name</h1>
<img class="pic" src="style/testPic300x200.png" alt="Group picture"/>
<p class="description">Here's the detailed description of the group.<p>
</div>
</body>
</html>
Summary: Clicking anything BUT the 'detailwhite' div should link the user back to index.html. Unfortunately, the 'but' is ignored.
Thanks for reading.
Your selector is adding the handler to a html element which does not have the class detailwhite, Instead you need
jQuery(function ($) {
$(document).mousedown(function (e) {
document.location.href = "index.html";
e.stopPropagation();
});
$('.detailwhite').mousedown(function (e) {
e.stopPropagation();
});
})
Demo: Fiddle