I am having a webpage load another webpage inside an iframe that takes up the entire screen. I have 2 div's that are on top of each other. These divs are actually anchors that direct to a new url (an action). What I am trying to do is once any of the divs is clicked, to initiate an onclick event that will go to the url specified in that anchor href, and then reload the initial index.html page. My class is working on a local enviroment to teach us a thing called clickjacking. Below is my current html.
The issue im having is I can have the anchor click go to the url I want, but then I am no longer in my index.html. Is it possible to open the referenced link in a new window, close the new window once its loaded and then refresh the index.html page. Once that is done to hide the div that was clicked since the "second" div is hidden behind the top most clickable div.
<html>
<head>
</head>
<body>
<center>
<!-- Two anchor divs that are clickable and on top of each other -->
<div id="secondDiv">
<a href="http://www.2ndURL.com" id="m2">
<div id="2" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
</div>
<div id="firstDiv">
<a href="#" id="m1" onclick="myFunction(); return false;">
<div id="1" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
<!-- Main iFrame where user interacts -->
</div>
<iframe id="new" src="http://www.mywebpage.com" style="opacity:1.0;width:100%;height:100%;">
</iframe>
</center>
</body>
<script>
function myFunction(){
var newWindow = window.open("http://www.actionURL");
newWindow.close()
var myWindow = window.open("file:///home/seed/Desktop/index.html", "_self");
}
</script>
</script>
</html>
TLDR:
Load iframe in webpage
click on anchor div on page that directs to a new url
load that url, once loaded go back to the index.html (all in one tab) (step 1)
hide the anchor div that was selected-- allowing second anchor to be
clicked
Thank you for your help.
It looks like you might need to "fake" the onclick if you want to have an onclick action work on the page you are on. You will need to modify the parameters, but here is a code that I have used:
$(function() {
// find out what our query parameters contain.
var query = location.search;
// isolate the position of the equal sign.
var equalIndex = query.indexOf('=');
// extract the image's id.
var imageId = query.substring(equalIndex + 1);
// click on the appropriate image.
$('#' + imageId).click();
});
The comments explain what each step of the code performs. In my case, I needed the page to load and then force the onclick using the unique image ids. In your case, you will need to tie it to your unique div. I hope that this helps you get started.
Related
<div class="tab-pane"
id="viewRateQuote">
<iframe id="frame1"
src="page1"></iframe>
</div>
<div class="tab-pane"
<iframe id="frame2"
src="page2"></iframe>
</div>
I have 2 iframes inside a parent page (all same domain). They display 2 different pages as tabs . When I click a button inside frame1, I want to set the src of frame2 to src="page3". If the user go the the parent page, the
src of frame2 is defaulted to page2. It's only that a specific button is clicked inside frame1 that I need to change the source
Thank you!
To access the parent DOM, you use parent.document.
So to change the src of frame2 from frame1, you do:
document.getElementById("buttonid").addEventListener("click", function() {
parent.document.getElementById("frame2").src = "page3";
});
List item
I am using the following code to hide a div and show the other.
page1
<a id="show" href="2#dk" onclick='document();'>mylink</a>
<a id="show1" href="2#dh" onclick='document();'>mylink</a>
page 2
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("dk").show();
$("dh").hide();
});
$("#show1").click(function(){
$("dh").show();
$("dk").hide();
});
});
</script>
</head>
<body>
<div id="dk">mylink</a>
<div id="dh">mylink</a>
</body>
</html>
This works on one page but not after the anchor tag loads up another page.
PREMISE
I have pages:-
first
second
I want links on on page and divs on second page
frist page links
divs
OBJECTIVE
If the page is first page, links need to be on this page
If the page is second page, then I wish to hide the divs that are not link to the link thats clicked
you can see here what i mean even i will put account detials that ppl can look at code and try if they want
http://testscripten.enjin.com/login
username:testscripten
password:test12345
go to admin and then edit
page layout and next to text will a pencil to change html or java
I think you can use window.location.href to get the link of the page you're currently on and then accordingly hide/show your buttons.
JAVASCRIPT
var pageName = window.location.href;
$(document).ready(function(){
if(pageName === "dh"){
$("#show").show();
$("#show1").hide();
} else if(pageName === "dk") {
$("show1").show();
$("show").hide();
}
});
HTML
<a id="show" href="dk">mylink</a> <!--No need for onclick if you're using jQuery-->
<a id="show1" href="dh">mylink</a> <!--No need for onclick if you're using jQuery-->
I am not sure of "dk" and "dh" being real links, if you have kept those as placeholders then this should work.
Simply show/hide based upon the path name containing the strings you specify:
$(document).ready(function(){
$('div.toShowOnFirstPage').toggle(location.pathname.indexOf("first")!== -1);
$('div.toShowOnSecondPage').toggle(location.pathname.indexOf("second")!== -1);
});
use AngularJS and SPA model to avoid page reload.
You can use also variables in url
If you need to reload page and have values on different pages you have to set cookie or webStorage http://www.w3schools.com/html/html5_webstorage.asp
Why don't you use php?
I'm having a problem on how will I target, here's the scenario, whenever I click the links Home, or food or resort etc. the contents of it should be outputted on the display below. What always happen is that when I click those links It always goes to a new tab. What I wanted is that it should display on the same page and on a given div. Please help me, I've been trying to search the internet but different results are coming up.
Here are my links
<div id = "panel">
<p>
<a href = "home.html" target = "display">
<font color ="white">Home</font
</a>
<a href = "resort.html" target = "display">
<font color ="white">Resort</font>
</a>
<a href = "hotel.html" target = "display">
<font color = "white">Hotel</font>
</a>
<a href = "food.html" target = "display">
<font color ="white">Food</font
</a>
<a href = "rates.html" target = "display">
<font color="white">Rates</font>
</a>
<a href="reservation.html"target="display
<font color="white">Reservation</font>
</a>
<a href = "contact.html" target = "display">
<font color = "white">ContactUs</font>
</a>
</p>
</div>
This is where the content should be put in
<div id="display">
<iframe name="display"></iframe>
</div>
If I understand the question--and I really don't--I think you're problem is pretty easy to fix. Just change this:
<name = "display">
To:
<iframe name="display">
I'm assuming you want to load those links inside an iframe, yes? Otherwise what you want to do will require javascript. But again, I'm not sure I understand.
There is no <name> tag in HTML, but there is a name attribute
Edit to explain iframes:
iframes load one web page B inside of webpage A, but the two are still separate pages. The "box" is probably the border of the iframe itself. The scrollbar appears when the content of webpage B is too large for the iframe to display everything at once. To get rid of the scrollbar, you can either make the iframe larger or make the content of webpage B smaller.
Making an iframe larger is no different than making any other element larger: just change it's CSS.
I have tried this. Use this code <JsFiddle Link> :
At first load the jQuery:at the top of the code
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Then add this jQuery code at the bottom of the file. In this code you will just check when an anchor tag is clicked and then return false which will prevent the anchor tag click submission. As well as load function will load the desired file of the "href" attribute.
<script>
$("a").on("click", function(){
//alert($(this).attr("href"));
$( "#display" ).load( $(this).attr("href") );
return false;
});
</script>
NB: If you are running this in local server there is no problem. You also can load .php file in it. But if you are running it in Windows explorer or linux file system then open it in firebox.
yes crowhill is right. i think you want to have a single page website. then you have to write all the contents in a single html page with different divs for different contents which you want to display using the links and use the id of the divs in the href part of your tag (i.e. ).
i think this will clear your query.
https://www.freshdesignweb.com/free-one-page-wordpress-themes/
I got a page. Its a key shop website.
I want to make that when the customer clicks on the icon, for example windows7, it removes the other products beside it, and write its description and payment button.
I already succeeded in not allowing the page to refresh, and only view the content.
But the problem is the tab; I want to change it in the end of the page, and whenever I click on the icon for windows7 it opens to me the page I want, but from the top.
I'am using the following code:
<script>
$("div.haha").tabs("img.one > div", {effect: 'ajax'});
</script>
i just want it to change content and not to start from top
<div id="haha">
<img class="one" src="imgs/product1.png">
<img class="two" src="imgs/product2.png">
<img class="three" src="imgs/product 3.png">
<img class="four" src="imgs/product4.png">
</div>
Actually to access div with "haha" id you should use
$("div#haha")
selector.
I am changing the code, because I had this code on hand and it works pretty well from what I've seen and appears to fit all your needs.
Javascript: (tested with jquery 1.9.1)
<script type="text/javascript">
$(function(){
$("a[rel='haha']").click(function(e){
e.preventDefault();
/*
if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div with id 'haha'
$.ajax({url:pageurl+'?rel=haha',success: function(data){
$('#haha').html(data);
}});
//stop refreshing to the page given in
return false;
});
});
</script>
html example:
This is the code outside the div. This shouldnt be effected.
<br /><br />
Here are the links outside the div to show you how it works. IMG 2 will refresh page and change url because rel="haha" is missing from the url<br />
IMG 1
IMG2 - NO REL
IMG3
RESET
<br />
<br />
<br />
<div id="haha" style="border: 1px solid #ccc;">
IMG1
IMG2
IMG3 - NO REL
</div>
Just know, any link you want to load into the div needs a rel="haha" (which can be changed to whatever you want to call it). If you want the page to load completely (like changing pages), just leave out the rel="haha" from the url.
Demo of how the code works: http://kygar.com/code/haha.php
I have a page with some links like this:
test1.html
<div>
Go to TAB1
Go to TAB2
</div>
The second page is a page with tabs:
test2.html
<div id="tab1" class="active-content">
<p>Hello this is the first TAB</p>
</div>
<div id="tab2" class="content">
<p>Hello this is the second TAB</p>
</div>
What I need to do, is that when I click on Go to TAB2 href, change to page test2.html and also change the div class so they look like this: (In order to show the second TAB when the page loads).
<div id="tab1" class="content">
<p>Hello this is the first TAB</p>
</div>
<div id="tab2" class="active-content">
<p>Hello this is the second TAB</p>
</div>
I tried using javascript href="javascript:tab()" but I cant do the two things at once. The page changes to test2.html but runs the code before the page is load.
function tab(){
window.location.href='test2.html';
var element = document.getElementById("tab1");
element.className="content";
var element = document.getElementById("tab2");
element.className="active-content";
}
I tried using setTimeout or onload method but nothing.
I need to change to test2.html and also change to the second TAB just clicking in an href, how can I do this?
Firstly, you need to send some data using the URL. This would be picked up by the test2 page, and can be acted upon.
A reference to an anchor on another page is defined by a hash:
test2.html#tab1
This would ordinarily scroll the page to the anchor, but you can write a small javascript to parse the URL for a "#" and change the relevant class:
var url_raw=window.location.href;
//Split the string at the #, and take the second part
var layer_to_change=url.split("#")[1];
//Set the class of the needed layer
document.getElementById(layer_to_change).className="active-content";
This would reside in the onload event handler.
Add a fragment:
Go to TAB2
Then on test2.html have this JavaScript:
var tabnum = location.hash.replace('#', '');
if (tabnum) {
document.getElementById(tabnum).className = "active-content";
}