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.
Related
So I'm pretty new to html/javascript but i'm working on a project where i'm loading a external html page inside a div, that when loaded looks like so:
<div class="content" id="content">
<object type="text/html" data="./ProjectsHTML/radio_project.html">
#document
</object>
</div>
and inside the '#document' is the external html. This external html contains some titles that can be minimized and maximazed to hide/show their content.
I have a side-menu on the main html that displays all the titles (the titles were hard coded on the side-menu) and I want to access the titles position inside the external html so when the title is clicked on the side menu, the external html autoscrolls to the position of said title.
If it's usefull for the solution, I'm using Electron.
Please help :)
Assuming the pages are from the same domain, a similar question is addressed here.
However, if the page within the iframe is from a different domain, you won't be able to access individual elements - that's cross-site scripting, and it is a security vulnerability.
There are a few options if you own both pages, even if they are on separate domains:
You could add HTML links/bookmarks to the page within the iframe and then reload the iframe when the user clicks the menu option on your host page. If would require a reload of the page within the iframe, but it could be used to get similar behavior.
You could post messages to the iframe and handle "scroll requests" in the hosted page. You will want to be careful with validation of the source of those messages.
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
I am trying to figure out the best way to inject a full HTML page into an already existing page via a chrome extension. The problem is say I am browsing page A and want to load the facebook page onto page A, is it best to place the response from the AJAX request into a div element with the innerHTML method or should I create a new iframe and write its document? If I do go with the second answer, would I then be bound to the iframe constraints posed by facebook or other sites that don't allow iframe loading?
The idea is to load a webpage in iframe ( for example wikipedia.com ) and that each link of that page that is clicked must create a new div with the content of the link in it.
Its like you are surfing, going from page to page but you will keep each page you see stuck in one page. So at the end of your surf, you will have all the history of the page visited.
I have a prototype of this, which is very…. wack but it stimulate the thing. You can check the prototype here . In order to make this prototype work like it should be , you can only click yellow background link. To make this work i have creat name attribut for iframe and target attribut for links.
The link has the same target as the name of the iframe. For example :
hyperliens
<div id="wrap2">
<iframe class="frame" frameborder="1" <strong>name="iframe_a"</strong> src="" >
</iframe>
</div>
Of course this prototype just stimulate how it should look but its not the real way to make it.
Here are all the problem :
1) I have to manually add the « target » attribut to all the link which is not possible because the idea is to load any website coming from a different domain name. ( like wikipedia, bbc etc… ). More over, in this prototype i have save the page ( wikipedia) and upload them to make it work so its local content. which is not good for my case.
2) I know that the same-origin policy doesn’t allow the communication between parent page and child iframe ( with different domain name ). According to me if i want to set that all the tag link show their content in a new div , i have to communicate with the child iframe.
So i’m wondering how i’m supposed to do… I need the easiest way because i’m ok with html/css but i’m newbie with js…. I was wondering if it would be easier if i use a chrome extension, like injecting js with background.js api. I also heard the postMessage solution in order to communicate with iframe even if they have different domain name. But I don't know if this solution is ok for this case.
I’m waiting for your answer :)
You can use jQuery to listen when the content changes. If it does, you prevent the default (don't change the content) and create a new iframe/div.
$("#iframeid").load(function(event){
//prevent normale action
event.preventDefault();
//create new div/iframe
[...]
}
This code is untested and is also fired, when the iframe is loaded initialy. Maybe you can find some workaround there, but I guess you get the idea.
Sources:
iFrame src change event detection?,
http://api.jquery.com/event.preventdefault/
edit: Add explanation
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.