I'm new in angularjs, creating an app using angularjs, in which I'm displaying a URL using iframe. URL will content html +script + stylesheet, so this works if internet is connected, I want to handle offline scenario where i want to show iframe content when there is no internet, so basically want to cache whole content of iframe including script + stylesheet so that if there is no network then also I can still show the content.
is there any way to cache whole iframe content including all html head, body tag and set back again in offline mode?
<iframe ng-src="content_url"></iframe>
Related
I'm writing a Chrome Extension and I would like to get all HTML, CSS and images/media content from the currently loaded web page.
If I use document.documentElement.innerHTML it gives me all of the HTML code as expected but has links to the CSS and image files.
Is it possible to get the entire loaded web page contents or would this only be possible using a scraper?
I want to change styles css inside at a iframe, using:
$("#box_close").click(function(){
("#iframe").contents().find("#scrolling_box").removeClass("scrollingBox");
$("#iframe").contents().find("#scrolling_box").addClass("scrollingBoxCustom");
});
Not working ok because the attribute src is in different host that index file, so it gives a classic browser policy error when trying to access a resource that is not on the same host.
Is there some another way I can change styles from the html content of an iframe from a page hosted on another server?
Thanks,
I have embedded a player from a site which streams a channel using an iframe. I am able to make the iframe responsive. But the content i.e the video player inside the iframe is not adaptive to the changes in viewport. I have tried several solutions from internet but all of them make the iframe responsive but not the content inside.
Is there any way I can make the video player inside the iframe responsive?
Please note that I don't have access to the source code of the player.
Here's the link to the html file: IFrame Code (I was not able to create a working fiddle of this. So shared the file instead)
Please note that I don't have access to the source code of the player.
You are in trouble
The one major thing to know while dealing with iframe is the source of the iframe
iframe source has the same domain as the main page which renders this iframe: In this case the browser will let you put your hands on the iframe contents and manipulate it as desired. As both the main site and the iframe are unders same domain it means you are a authorized person so you can change the contents if required.
So even if you don't have access to the source code of the file there are still way's to make your contents responsive if they are in the same domain. This would require Jquery
iframe source domain is not the same as your main page which renders this iframe: In this case you cannot do much with the iframe except displaying it in your page. The browser will not allow you to change any stuff on this iframe. This is a security protocol followed in all the browsers.
what happens if at all we are given access to manipulate the contents - Eg: I can render youtube in my iframe of my website and change all the instances of the string "youtube" to my own name, thus making this entire site look like my own. Also I can manipulate the ajax calls, jquery stuff etc,etc.. and get data from the site.
Currently we are trying to access the HTML of (with javascript) dynamically generated html-elements (e.g. to get the url of an image). If the html-elements are generated with javascript only - their is no problem. Just extracting the image url with javascript by accessing the DOM elements. But now we have trouble with an iframe.
This is the situation at the moment:
We include external script-file (www.test.com/script.js) to create a gallery on our website
The script.js generates a new iframe in our website (document.write('iframe code here')); referencing to www.test.com/iframe.html)
The iframe.html contains javascript-code again to generate the gallery by creating serveral dom-elements (divs, imgs, a, p,....)
Now we need to read the src-attribute of these images. With the debugging tool of the browser, it is no problem. Without the iframe, it's also no problem. But with the iframe, because of the cross domain policy of the browsers we can not access the html of the iframe.html with javascript.
One possible solution was to try to get the src of the iframe tag with javascript, call a server-side script to get the html content of the src-url and run the content via eval()-function on the client again.
I hope you have other better ways to solve that.
It is not clear from your question, but if the iframe is being served by your app, you can use postMessage in order to communicate between the iframe and its parent window.
I am developing a system where I will display content in a browser in an embedded application. The normal browser navigation controls cannot be used but instead will have javascript running in a wrapper round the page. The content will be coming from the same domain but I cannot pre-process the content. Needs to be compliant with IE8+ and latest of FF and chrome.
The things the javascript needs to do are..
Load in new content
Detect when the content has fully loaded
Set focus to elements
Detect which link currently has focus
Retrieve lists of links on the page
Trigger links
What is the best way to place the content html pages within the wrapper page? eg
frames
iframe
div
Both iframes and divs could work. The final choice will depend on the details of your implementation, and is also a matter of personal taste.
With divs, the html becomes part of your wrapper page. The risk is to have conflicts between the inserted content and the rest of the page (css, html ids for example).
An iframe creates a sandbox and avoids conflicts. The downside is that the layout is not easy to adjust as the content lives in its own document. html5 introduces new iframe attributes like "seamless", but they won't work in IE8.
As above, Iframes may be best; however they are deprecated and don't always give the best results. An alternative would be to set a div for the content, and Ajax the content into the frame. You can then access it through the dom to get links etc.
To decide which would be best I would consider what content is being loaded - full HTML documents (with doctype, head, metadata etc) will be problematic without I frames.
If the content being loaded is just plain text, maybe with a few basic HTML elements, I would ajax it into a div