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?
Related
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>
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 working about Chrome Extension . I read a lot in Chrome developer but no result . My idea is load a html file to panel at right-bottom browser (or any position I liked) to show videos .I cannot use popup because it will be disappeared if i click anywhere.
Except popup,buttons on menu bar , how can i create a panel in chrome browser ?
You can inject the html in the tab where you want to show the html. See this answer how to inject html :
Inject HTML into a page from a content script
Use your own css as content script to position your element.
I assume you will be showing video in loaded html from external servers. But chrome extension do not allow you to reference external resources in your html. So you will need to download the video with response type blob and just set src of video element to this blob using window.URL.createObjectURL
I have a script tag on an HTML page that references an external script URL. The HTML page and the script run on HTTPS URLs. However, the script creates an IMG tag which references an image that is on an HTTP URL. I don't have control over the script itself (it is hosted by a third party). The problem is that the browser complains about loading HTTP content on an HTTPS page.
I tried the following:
Hiding the image using CSS display property - This still causes the image to load and the browser to complain
Changing the SRC attribute of the image using JavaScript/JQuery - this doesn't solve the problem because the script and the image load first and then my JavaScript runs
The image itself is not necessary, I can hide it or remove it. Also, if needed, I can host the image myself on HTTPS, but I still need to change the SRC attribute BEFORE the image loads.
Any suggested workarounds?
I have developed a mobile application which loads 3 css and 7 javascript files. Problem is if the wifi signal is very slow, HTML loads before all javascript and stylesheets are loaded. Since stylesheet is not loaded, HTML looks disturbed and after few seconds (i guess after css and js are loaded properly), HTML structure automatically take correct format but I dont want to show the disturbed format and to do that I need to make sure that all js files are loaded first then only HTML should display.
If you have any idea how can this be achieved ?
You can do using Cache manifests. Read these resources:
http://appcachefacts.info/
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
Alternatively - ensure your resources are loaded before the body by placing them in the right place (head tag).
You should link to your external css stylesheet at the top of your webpage in the header like this:
<link rel="stylesheet" type="text/css" href="http://whiterootmedia.com/css/example.css" />
or insert your <style> element in the header. Likewise this should be done for your JavaScript if it effects your initial layout. Keep in mind that if you are using an external JS file, the browser will stop rendering your page at the point in your code where your external JavaScript file is referenced, to load that external JavaScript file. If you're using a lot of JavaScript, place it at the bottom of your page (contrary to what most people do) or use an onload() function.
The webpage is loaded top-to-bottom, so the problems you're having should be related to the order of your css (most likely).