I'm trying to display an map inside an iframe that has a needle which on mouseover shows some information about a certain company, the thing is once you click the link the page opens up inside the iframe which ruins the experience, so i was wondering is it possible to make the links inside an iframe open up in a new window instead perhaps using jquery or something similiar?
the code i have atm is
http://www.jsfiddle.net/rkd59/1/
Edit: the very least capture a click within the iframe so i might resize the iframe
You will need some kind of open API to do this properly, and Eniro doesn't provide one according to this page (in Swedish).
I would recommend you to use the Google Maps API v3 instead. I've made an example on jsFiddle that looks similar to that of Eniro.
I'll gladly give you more help with this, so just ask away!
You can't (or it is extremely hard to ) make events inside the iframe affect the parent page. This is to prevent attacks from XSS, or cross site scripting. Having said that, if the site within the iframe is on your own domain and you want to set up some extremely tricky ajaxing and php session IDs, maybe you could make something work, but even then I'm not sure. And I don't know if this would be a security hole, maybe someone else can speak to that. It would perhaps look like:
main page sets up session ID and passes that to the iframe url via a get variable
the iframe takes click information and sends it to a Session variable via an ajaxing call to a script on the server.
The main page then reads (how?) the session cookie and makes changes based on it's value.
All in all, you may find that it may be much simpler and more secure to acheive what you want using a different method.
Due this map is loaded inside an iFrame, it's not possible to run any javascript event listeners on the links, neither is it possible to change the html.
Please try the following:
<script>
x=document.querySelectorAll("a");
for(i=0;i<x.length;i++)
{
x[i].setAttribute("target","_blank");
}
</script>
Thus all links open in new frame.
To make a link popup in a new window you would usually use target="_blank" as such:
Go to Yahoo
However this will only work if you can modify the code you're showing within the iFrame
There is a partial solution.
You can add an absolutely positioned DIV tag over the top of the IFRAME and capture clicks on this instead. See example here shaded in 20% alpha red.
http://www.jsfiddle.net/rkd59/6/
However, this means that the map works in "read-only mode" and while you can capture the click event you wont know what link the user has clicked on.
Related
So in my case I use Iframes to attach Grafana to my page (which provides me beautiful and easy to use graphs).
It's possible to notice that Grafana's Iframes triggers a kind of refresh on my Angular page after each interaction of zoom in or zoom out (using mouse clicks) on the graph thus messing broswer's history. I don't see any changes on Iframe's src to justify this page refresh and it doesn't trigger anything apparently (doesn't trigger any onload, for example).
Is this a normal behavior? How can I prevent this?
I am using a scripted dashboard of Grafana version 6.2.2 along with Angular 6.1.
Hoping to help out, some things that I might try in your scenario:
A blank html page with only a grafana Iframe in it. See if it still refreshes the parent page. If not, then maybe the problem is with angular.
You said sandbox breaks the iframe? Maybe play around with different sandbox values. Like allow-scripts and see if it needs one of those values to work
https://www.w3schools.com/tags/att_iframe_sandbox.asp
Maybe try putting the grafana iframe in another iframe. I've never done this before, but maybe it will try to refresh the parent iframe instead of the parent page.
It could be helpful to post your angular html code to the question too. Might be some hints in there.
Without the effective implementation of the iframe is difficult to suggest the best way to act.
The simplest solution that comes in mind is iframe's sandbox attribute:
<iframe src="my_iframe.html" sandbox></iframe>
What's an iframe sandbox ?
The sandbox attribute enables an extra set of restrictions for the content in the iframe.
When the sandbox attribute is present, and it will:
treat the content as being from a unique origin
block form submission
block script execution
disable APIs
prevent links from targeting other browsing contexts
prevent content from using plugins (through , , , or other)
prevent the content to navigate its top-level browsing context
block automatically triggered features
The value of the sandbox attribute can either be just sandbox (then
all restrictions are applied), or a space-separated list of
pre-defined values that will REMOVE the particular restrictions.
Ref: https://www.w3schools.com/tags/att_iframe_sandbox.asp
You can overwrite the <iframe>'s pushState and replaceState functions:
iframe.contentWindow.history.pushState = new Proxy(iframe.contentWindow.history.pushState, {
apply: () => {},
});
iframe.contentWindow.history.replaceState = new Proxy(iframe.contentWindow.history.replaceState, {
apply: () => {},
});
is there a way to press a button on external site with javascript and/or jquery? Like I open a new window like this:
windowObjectReference = window.open("http://some_site.html","name");
Then I want to press a button on this site. Something like this:
windowObjectReference.button.click();
Or:
name.button.click();
It would be a huge security violation if a browser would let you do that from the script placed on your own website.
So, no, this cannot be done, and should not be possible.
But...
If both sites belong to you (you have access to their code), you can pass a parameter (eg. as a hash within URL), then the target website may read it and fire the event you mentioned (name.button.click()).
You can't do this with JavaScript from a webpage.
You can do it from browser extension though.
NO !
For security reasons. This kind of attack is called clickjacking! and it was used on Twitter.
is there a way to press a button on external site with javascript
and/or jquery?
I know that I'm late at party but YES, Unfortunately it is and is a quite simple way.
make a div on your page (ex. #externalDiv);
set CSS attribute to hidden and display to none;
use (simple way) jQuery method .load() or make your own JS method using XMLHttpRequest();
load external page on your page;
click on button you wish
$('#externalDiv').load('http://www.externalPage.com', function(){$('#externalPageButtonId').click();});
Can not doge by something if you don't know how it's work :)
You are not allowed to do so because of SOP. Any trick to force user to perform click on your behalf will be considered as clickjacking attack and could lead to bad consequences.
I'd like to do the following in my application via javascript.
1) Press a button from a web page that opens a popup.
2) Select some options in the popup and accept them.
3) Change the content of what is in the first web page according to what has been selected in the popup and change it. A GET Request is acceptable, and if possible popup with the selected options should again be on top, either by putting it on top or by opening a new one with the same options chosen.
I think javascript must have some way of saving the name of the browser tabs your are opening and later, if you want, open a new URL, or put one over other but I cannot find them. The window.open options doesn't look like they can do this.
Any idea on how to achieve this thing? Thanks for your time.
You can try the window.opener method in the popup to access the main page. High level details here: http://www.w3schools.com/jsref/prop_win_opener.asp, but if you Google it there's examples.
We did this for a project and it works, with a few caveats:
Cross domain basically doesn't work, if you have multiple domains you have to get more creative.
Be careful cross browser as well, we had to add some custom javascript to handle
Basically, what you need to do on your main page is define a global javascript method that does what you want it to (it can take parameters). Then, on your popup, you can call it with window.opener.MethodNameHere();
Theoretically, if you do need to handle cross browser, you can try using postmessage, which I believe is only supported in html5 natively (there are plugins for html4), but it would probably be tricky getting it right in this circumstance and I'm not sure how to do it off the top of my head.
I am trying to something I really can't figure out. I have an iFrame loading some content from another domain on which I have no power. What I am "simply" trying to do is fetch the content of the iFrame to use it in PHP/Javascript. This is where I faced the "cross-domain" problem. I am unable to access the content of the iFrame. So frustrating.
So I read, and read some more and seen about the "postMessage()" function provided by HTML5. I saw a solution with this system, but I still can't figure one point. Basically, it works with a sender and a listener. So I need to have a listener in the iframe that, when triggered, will send the content back to the main window.
But HOW do I add some code in the already loaded iFrame without deleting the content ?
I don't really need to use postMessage(), I can be anything as long as I can get this damn content !
Any suggestion is appreciated !
Thank you !
This is still not possible and for good reason!
To read from another domain using the client's cookies, IP and credentials requires the page being viewed to expose the information somehow - It's a 2-way conversation with the Listener (Outer page) and Sender (IFrame) working together.
A reason this is required: Imagine making an IFrame that takes up 100% of the page. You could show a common website's login form in the IFrame and yet intercept keystrokes/input box changes and log them. The user would only know the difference if they checked the URL.
If you have control over the browser of the user, you could use GreaseMonkey's cross-domain AJAX to get the contents of the IFrame (Assuming Firefox/Chrome)
Wont something like this help:
function getContentFromIframe(iFrameName)
{
var myIFrame = document.getElementById(iFrameName);
var content = myIFrame.contentWindow.document.body.innerHTML;
//Do whatever you need with the content
}
I know there have been several similar questions, but I haven't seen an answer to my specific need: Is there a way to click a button in a separately launched web page? For example, I launch another web page via:
<a href="x" target="y"> or
window.open()
Can I then click an input button in that launched web page programmatically?
Unless the page is underneath your own control or resides on the same domain then no, it is not possible. This would be cross-site scripting and all browsers have security sandboxes in place to keep something like this from happening. Why are you trying to programmatically press a button on a page that you're also programmatically opening?
Yes. When you do window.open it will return you a window object. Var win = window.open(); win.fnSubmit(); assuming fnSubmit is the function on the other page that will do the.clicking. and both pqges on the same domain.
This is a technique used by some hacking injection attacks. Basically you can inject javascript into the querystring that can attach itself to the DOM, change an image or swf file source or simply run when the page is loaded; example here and example here.
Or if you already know the structure of the other page you can directly target methods or objects.
But as these are not nice things I assume that you have good reasons why you can't touch the code on the receiving page but want to adjust its behaviour?
You can click on any element you can select.
You can only select elements in windows that you have security privelages to.
You have rights to your own window, and rights to windows within the same domain & security.
To access the element you'll need the window object, which is returned from window.open
var newWin = window.open(siteYouHaveAccessTo);
newWin.document.getElementById('foo').click();
If you're trying to click on the Search button on www.google.com, you're SOL.
Survey says... maybe. If you've done your homework, you will probably be able to get communication to happen within the same subdomain. It gets progressively more difficult from there -- I've never had consistent cross-browser sub-domain support for manipulating JavaScript between two windows (or iframes).
That said, if they are the same domain, it is a matter of descending into it. If I have:
Window A opens Window B
Window B declares var winBVar
Window A is able to access winBVar after, and only after, that variable is declared (as in, you still need to wait for document.onload, etc)