Background:
I am trying to iframe an entire external website for a project. Some links within this external site are within even more frames. They use js to access the top window and set its location according to the href value of the link, which results in the new page loading completely outside of my iframe (which I would like to avoid).
Question:
Has anyone dealt with this/is there a way to deal with this? Ideally I would like to prevent the iframed site from accessing frames outside of its own.
Note:
As per my knowledge it is not possible but still want to have a second opinion
Thank you very much for any help or insight,
To get around the restriction for the iFrame sources, the only way you can do it by setting up a web proxy script on your website.
<iframe src="proxy.php?url=http://othersite.com/">
you should be able to find some proxy implementation on some script site.
Related
i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS
Contained within my web page is an iframe that's src is set to load a page from another domain.
This domain has links with target="_top".
What I'm trying to achieve is, when someone clicks one of these links, I'd like it to open in a new window rather than load in the current window.
Is there any way to "catch" this and do what I require?
Thanks!
The domain has probably very good reasons to put target="_top" in their links. They don't want to be ran inside a(n) (i)frame. The correct answer to this is "No, this can't be done." Obvious security reasons prohibit us to do this.
You don't want somebody messing with your page by running it in an iframe. Phising and password retrieval becomes kind of easy when this is allowed. Browsers will not allow this these days.
I'd like to track outbound clicks within an iframe on my self-hosted Wordpress site. I already use Google Analytics to track inbound visitors (GA code in the header), but I'd like to know which/how many of those visitors click on links within the iframe on each of my pages. For the record, the iframe does come from an external advertiser.
This is the iframe code I was given (using sample names in place of real ones):
<iframe src="http://www.advertisersite123.com//widget.html?width=510&height=950&product=2" frameborder="0" scrolling="no" width="510" height="950"></iframe>
This line of code is currently pasted on single.php, making a table of links appear on every single post at the bottom of the page.
I'd like to know how many clicks (just clicks in general is fine, don't need to know where they go) are occurring in this iframe. Ideally broken down by each individual URL on my website so I can determine which URLs are more successful in generating clicks within the iframe.
And if possible, I'd like to create a funnel that tells me which visitors to my website (by source) exit via clicks in the iframe.
Is any of this possible? And if so, what code do I add to the page?
Thank you for any and all assistance, it is appreciated!
What you are asking for is not easily done. In general, you cannot have javascript on the parent page that can hook into events on the iframed page if it is not hosted on the same domain. Same thing for the iframe page trying to tap into the parent page's DOM. This is called cross-site scripting (XSS), which goes against the same domain origin policy.
At a minimum, the easiest thing to do would be to put the GA code on the iframed page. But that's probably not something you can do (though it couldn't hurt to ask the vendor).
But some vendors (usually social media vendors such as Facebook, Google and Twitter) will have their widgets that output an iframe w/ info. They will set their server to allow for cross-domain scripting, which would allow you to tap into the iframe's DOM. Usually though they provide an API along with the widget that makes it easier to hook into relevant events (like share events), so that you don't have to do (much) coding yourself.
Basically long story short, there's no way for you to track it without the person in charge of the iframe domain getting involved.
I was searching for something similar and came across this. This jQuery Plugin lets you track an Iframe.
Tried events?
If the click is out of iframe:
_gaq.push(['_trackEvent', eventCategory, eventAtion, eventLabel]);
If the click is inside the iframe you should use:
window.parent._gaq.push(['_trackEvent', eventCategory, eventAtion, eventLabel]);
I'm interested in linking to or embedding an external page, scrolling to a specific point. Is this possible, or do cross-browser securities prevent it?
One workaround I've considered is creating the iframe within a div, giving the iframe a negative margin and then overflow:hidden; the container div.
Thanks.
A possible solution could be to use JavaScript to scroll the page. However, if the page you are embedding is on a different domain, you cannot access its content with JavaScript if it is in an iframe (due to the same origin policy). However, if it is on the same domain as the host page, you should be able to access it using JavaScript and then scroll using the window.scrollTo(x,y) method or similar (see this page on MDN).
Also, if the page you are embedding has a named anchor (<a name="blah">) or a block-level element with a specific id (<div id="blah">) at the point you want to scroll to, you can link to it or embed it by using a URL such as http://example.com/page#blah and it will scroll to blah automatically. This is not under the same-origin policy, so you can do something like <iframe src="http://example.com/page#blah"></iframe> and the frame will automatically be scrolled to blah, even if it is not on the same domain as the host.
The "iframe with negative margin" solution you mentioned could work, but that might be hard to implement and would probably cause problems, especially if you want full cross-browser compatibility.
OK, so here is my issue. I'm building a system which will allow people to embed lists of links on their pages. When the link is clicked, i'd like to use something like Lightview or Lightwindow to open it up over the whole window, not just in the iframe.
I don't have access to the page that the user will be embedding this object into. Everything I've tried so far tells me that I can't open anything over the parent window, since I don't have access to it from the iframe or object, javacript security issue.
However, I've seen sites that do that kind of overlay. so it must be possible. If anyone can point me to any resources that could help, that would be great.
if it matters, i'm using Ruby on Rails...
Thanks...chris
It can't be done if the iframe is from another domain than the website, because:
You cannot change the dimensions of
the iframe from within it.
You cannot access the parent
document from within the iframe.
I suggest trying using some sort of JS file people will embed in they're website, in the place they want your links to be (something like Google Ads) and do a document.write to place
your links in their webpage. then, you will have access to the page, and can do a whole lot more :)
is this helping you?
As vsync said, you will have to have the user embed a script instead of the plain HTML.
This script has full control of the page, and if you also want it to be able to communicate with the framed document (your site), then you could use something like easyxdm to do cross document communication.