First off this is the code
<div id="channelmiddle" class="middle-content alignleft">
<script type="text/javascript">
function changechannel(ch)
{
var url = "ch"+ch+".html";
document.getElementById("channelchange").src = "ch"+ch+".html";
}
</script>
<center>
<button class="button_static" onclick="changechannel(1)">Channel 1</button>
<button class="button_static" onclick="changechannel(2)">Channel 2</button>
<button class="button_static" onclick="changechannel(3)">Channel 3</button>
<button class="button_static" onclick="changechannel(4)">Channel 4</button>
<button class="button_static" onclick="changechannel(5)">Channel 5</button>
</center>
<iframe id="channelchange" src="ch1.html" onLoad="alert('123')" width="500" height="400" scrolling="no"></iframe>
</div>
On this page, whenever I click the button, it redirects to the homepage. I can't figure out why. Can someone help me? do you need more information about the code?
The modern browsers have security checks built in to prevent iframes from displaying web content when you change the src attribute. Chrome has a feature bypass the feature using &output=embed. See this article. From my tests, you can change the src attribute, but the content will not change. The best thing you can do is to load the iframe on the initial page load and not change the src attribute. There are a few solutions.
Make a redesign. Load the iframe with the content that needs to be displayed without the use of button clicks.
Send the user to another page. Set the iframe's src with the url that corresponds to the button on the initial page load.
If you absolutely have to, try making iframes for each url hide the iframe based on button clicks. This is not an ideal solution, but it accomplishes your goal.
Related
On a button click, I'm setting the src attribute of an iframe via javascript. The problem is that on the button click, the page inside the iframe seems to be stuck in an infinite loop (iframe keeps stretching vertically at regular intervals of 1-3 seconds). What could be the reason for this?
<!-- HTML -->
<div>
<button id="myMap">Load Map</button>
<iframe id="map"></iframe>
</div>
<!-- Javascript -->
$('#myMap').on('click', function(){
$('#map').attr('src', '/app/myPage');
});
It works for me... are you sure you are using jQuery right? or maybe you have more code that cause the problem you talk about?
Here is your code, and it works for me...
<!-- HTML -->
<div>
<button id="myMap">Load Map</button>
<iframe id="map"></iframe>
</div>
<!-- Javascript -->
$('#myMap').on('click', function(){
$('#map').attr('src', 'https://idanmorblog.wordpress.com/2016/06/29/when-namogoo-conquered-sparta/');
});
https://jsfiddle.net/sidanmor/n2zu783e/
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.
I created a php-html website with many pages, in these pages there are ,,, and other html elements, but not all of them linked to other pages, it means they do a job into the current page, but other elements are linked to other pages, how can I set when user clicks on those elements(,,...) that are linked to other pages,before going to next page the page be grey and loading.gif is shown.
I see this code
http://hungred.com/how-to/tutorial-simple-screen-grey-effect-jquery/
but in this jQuery code we need to set $('#button').click(pop); for thoese elements one by one,that I think it is not good job, what is the good idea, that works for whole pages?
A quick solution could be to apply the same class to all the buttons that need to act in this way:
<button class="externalLink">Button 1</button>
<button class="externalLink">Button 2</button>
<button class="externalLink">Button 3</button>
<button class="externalLink">Button 4</button>
<button class="externalLink">Button 5</button>
And then write something like this in javascript:
$('.externalLink').click(pop);
This will apply the same behavior to all the buttons with that class
I have a div that contains the iframe, this iframe loads a URL which shows a page.
Within the iframe, i have a close button which when clicked, hides the div. But I am unable to access the div from within the iframe.
My code as below
<div class="app" id="modalOverlay" style="background-color:rgba(0,0,0,0.5);position:absolute;z-index:1;width:100%;height:100%;top: 0;left: 0;">
<div id="modalContainer" style="position:absolute;z-index:2;margin: -250px 0 0 -250px;top: 50%;left: 50%;background-color: #222;width: 500px;height: 500px;">
<a class="close" style="position:relative;top:-10px;z-index:3">Close</a>
<iframe src="http://www.local.dev/api/v1/track" frameborder="0" style="width:500px;height:500px;position:relative;top:-20px">
</iframe>
</div>
</div>
Within the iframe src view, i load a js which uses jquery
$(document).on('click','.close',function(){
$(document).closest('.app').remove();
});
Anyway to do this?
you can use:
$('#modalContainer', window.parent.document);
second parameter is the context in which to search.
$(document).on('click','.close',function(){
$('.app', window.parent.document).remove();
});
Try something like this:
$('#divtohide', window.parent.document).hide();
Or something like this:
$("#InFrameId").on('click', function() {
$('#divtohide', window.parent.document).hide();
});
EDIT: based on the recent update to your question if the frame is from a different domain, browser will flag this as XSS and you may not be able to do much. One way you can run scripts is if the server of the iframe is configured to send the X-XSS-Protection header with correct value.
This can be done with child to parent frame messaging.
Have the parent frame listen for a message.
<div id="myDiv">
<iframe src="childFrame.html" id="frame1"></iframe>
</div>
<script>
window.onmessage = function(e) {
if(e.data == "close") $("#myDiv").toggle();
}
</script>
The child frame can send a message to the parent frame.
<button onclick="parent.postMessage('close', '*');">Hide</button>
See my gist: https://gist.github.com/sfarthin/9140403
DhruvJoshi's method will have the browser flag this as a XSS attack.
Simply you can't, according to your code, I think your iframe comes from different domain, so a frame from different domain cant access to parent page.
Therefore you may consider using nodejs or maybe, you should read this: Cross domain iframe issue or a search with "crossdomain iframe" keywords will lead you to what you need.
First just let me say I'm open to ideas on a different approach altogether.
I have and iframe as such:
<div id="testloadlogin">
<iframe src="../security/login.aspx" width="400" height="500"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
The page being loaded with the iframe has a div called loginInnerBox. I only want to display the loginInnerBox and everything inside of it.
Any ideas on how to do this? I was thinking of using Jquery or javascript of some kind to remove everything else on the page loaded by the iframe, not sure how to access that though...
Just to be clear I want everything on my page outside of the iframe to remain intact. I want the equivalent of saying $.('testloadlogin').load('../security/login.aspx' #loginInnerBox) which would just get loginInnerBox's html and place it in the testloadlogin div. However I need the back-end processing from the other page which is supported by iframe, but not by the Jquery load.
The markup of the page loaded by the iframe is
<body>
<div>
</div>.......
<div class="AspNet-Login" id="ctl00_CLPMainContent_Login1">
<div id="loginInnerBox">
<div id="loginCreds">
<table>
</table>
</div>
</div>
</div>
<div>
</div>....
</body>
Do you need more information than that?
I tried this, it had no effect:
<div class="ui-corner-all" id="RefRes">
<div id="testloadlogin">
<iframe onload="javascript:loadlogin()" id="loginiframe" src="../security/login.aspx"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
</div>
<script type="text/javascript">
function loadlogin() {
$('<body>*', this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();
}
</script>
With jQuery, you can load not just the contents of a URL, but a specific CSS selector from within that URL. This would be a much cleaner approach. It's like this.
$("#area").load("something.html #content");
Via CSS Tricks
$("iframe").contents().find("*:not(#loginInnerBox)").remove();
Be aware this would only work on iframes loaded from the same domain (same origin policy)
EDIT: Probably this removes children of loginInnerBox as well. In that case you could try to clone it before:
var iframe = $("iframe").contents(),
loginBox = iframe.find("#loginInnerBox").clone();
iframe.find("*").remove();
iframe.append(loginBox);
Something like that..
Add this to the <iframe>-elememt:
onload="$('body>*',this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();"
it will hide every child of the body except #ctl00_CLPMainContent_Login1
If #ctl00_CLPMainContent_Login1 contains more than the loginbox, you have to use the suggestion using clone() posted by pex.