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?
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
I site I dinamic created iframe :
document.createElement('iframe') ;
Is it whether the contents of the iframe will be indexed by a search engine?
If not, what can help?
The answer is "depends"
Google implements simple javascript evaluation on a page when it's parsing it so it will fetch data as if a user sees it but does not interact with it.
So if the user has to click on a button to see the iframe, it will not parse it.
If the iframe gets rendered on page load, it will see it.
Then is the matter of google indexes iframes. Yes it indexes the iframe, but no, it does not count the content of the iframe to your page. it will see it as a seperate page that gets its own ranking as if you were linking to it.
I have a wordpress website, where I have pages with artists. This is an example: http://chasefetti.paradigmrecordsinc.com/ of a page from my website
On the top I have an iframe from arena.com
I want after the page loads to click the play button.
If I do it on the arenas page http://arena.com/artist/chasefetti like this (using firebug):
document.getElementsByClassName("fg icon-play-fg")[0].click()
it works, but on my website I guess it doesn't know about accessing the iframe.
How can I specify to access that iframe ?
Also the full mission that I gotta do is to play that button for each page. I am thinking to add a jquery that does what I want to do, to the templates page.
My main problem is accessing that element from the iframe
As far as I know(I tired it once) you can't do that, unless the source of the iframe is on the same site as yours, which isn't the case here.
Also check this same-origin policy.
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.
I have an iframe that loads a form from another site into my site (I control both domains but they are different).
The iframe is loaded into a fancybox on my site and I would like it to popup an AJAX loading graphic when the form in the iframe is processing.
I know I can't directly add event listeners to the iframe form other site but is there any way that my site can know what is going on in the iframe?
No there's no way of knowing what another iframe is doing.
Have the domain (the one inside the iframe) load the AJAX loading graphic before the content shows up, all on the server side... you don't need the client for this.
I agree with Luca, but then your form will have to be loaded before the AJAX loading graphic can be displayed. If it is a very large form, this might take a while and will perhaps defeat the purpose of the loading graphic.
Have you considered loading the contents of the form via javascript instead, bypassing the iframe altogether? Just GET the contents of the form and load it into a div? (Granted, if the form you're loading is complex, that might cause more problems)
It is absolutely forbidden by browsers to know what is going on in the iframe.