Javascript/iframe/embed/object question - javascript

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.

Related

Load External Custom Page and Execute Custom CSS or Javascript on The page

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

Javascript integrated web browser?

I have two different questions I would like to ask. I am new to javascript and I am trying to create a project ... of some sort.
Firstly, is it possible to have an integrated webbrowser within ... say a PHP page? e.g. using javascript, I have a canvas sized 500 x 700 within my "index.php" page, and can navigate to any website while remaining on my "index.php", but the websites appearing on that canvas?
If this is not possible, then is it possible to navigate to a website, and then interact with the elements thereof? I doubt this because you would no longer be connected to your file if you rediirect to another website, hence the integrated idea.
If neither or those are a possibility, then is it at all possible to interact with an EXTERNAL website's elements? External being not yours in this context.
You can use an iframe tag to load an external page, however
With most modern browsers you're not allowed to interact with the elements for security reasons
Many sites (still for security reasons) don't want to be loaded inside an iframe and they try to either escape the iframe or just render back a blank page instead.
One security problem is that a malicious page could open an iframe with e.g. a buy page of amazon.com and then render over it another opaque element that lets the click go through it.
This way a user may be tricked into click over a "watch the cute kitties" button and instead is clicking on the one-click-buy button of amazon (or liking a facebook page, or starting following a spammer on twitter or ...).

Open two iframes without full reload of the second iframe

I have an AngularJS application which runs under an iframe in a different website. I have the code of the website.
I need to open a new iframe to the same AngularJS application but to a different route. I don't want to load all the application again in the new iframe. I am looking for something that will duplicate existing instance of a window content, or maybe open a new iframe of the same application without loading the whole app again.
Here is the code explanation:
I have this html page:
<div>
<iframe src="www.myapp.com/books"></iframe>
</div>
www.myapp.com/books is an AngularJS application so it loads a lot of dependencies, execute a lot of code and make a few backend calls. I want to add a button that it's click will open another iframe to the html page:
<div>
<iframe src="www.myapp.com/books"></iframe>
<iframe src="www.myapp.com/names"></iframe>
</div>
The new iframe will open the same app but different route. Unfortunately this will cause a full loading of the application for the same iframe, and I am looking for a way to prevent this. Like cloning the same instance of the iframe and route to the new location without a full reload..
Any idea?
Lets talk JQuery on this one.
Say you have your nice iframe (iframes aren't actually very nice) element
<iframe id="original" src="www.myapp.com/books"></iframe>
take note of the id tag.
then you got your javascript, enclosed in tags
var newIframe = $("#original").clone();
$("body").append(newIframe);
LINK ---> Check this all out at JSFiddle <--- LINK!
The best thing to do is probably write the html/javascript/css of your application as text in the second iframe.
You can get the contents of the first iframe
page=$("#iframe1")).contents().find("html").html();
and then set it to your second iframe
var doc = parent.$("#iframe2")[0].documentElement;
doc.open();
doc.write(html);
doc.close();
You may not want to do a full copy like this, but I think this is a starting point.
I think it's mandatory that your application resides on the same domain of the website hosting it, or this will fail for cross-domain scripting security reasons. You would have to change the design of the whole thing if so, since you cannot manipulate an iframe on a different domain.
Information taken from How to insert html in iframe and Getting the html content of an iframe using jQuery
EDIT
What you want is probably not iframes. You can load the javascript for your application once in the main webpage. Then that javascript should download (or create) html elements, and inject them into a div. Doing so, the javascript for your application can manage as many subframes you want. The downside is that you must probably change a lot your application: now it is designed to be loaded as a webpage, and should be rewritten to be a js that manages some divs putting content into them. I don't see another solution, unfortunately.

Displaying a page preview and manipulate it in another site

I'd like to show the user a small preview of another page (from a different domain) and let him control the page's elements. For example: replace the logo on the top.
I tried two approaches:
Using an iFrame causes me cross domain issues.
I can't "preinstall" javascript functions on that page either.
Would love to get more ideas.
Thanks!
You can refer to http://jsbin.com/
The output div has a iframe where your page cloned from other domain.
On the other hand you should have your admin interface where user changes anything change the HTML of the iframe content (as it is a clone not directly from other domain browser allows you to modify). So a live preview can be shown to user.
Here, for how to change the iframe HTML u have many examples otherwise refer to the jsbin.com code.
I just came across this article. This might help you. http://www.sitepoint.com/how-to-safeguard-your-site-with-html5-sandbox/

iframed site accessing frames outside of its own

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.

Categories