I am working on Phonegap application and basically I want to embedd an external webpage inside my html page, yes for me various options are available. I tried with <iframe> method, but I am getting below error:
Refused to display 'https://xyz.com' in a frame because it set 'X-Frame-Options' to 'DENY'
Since I don't have control over the server side, loading an webpage inside an iframe is ruled out.
I also tried with ajax method:
$.ajax({
crossOrigin: true,
url: 'https://xyz.com',
success: function(data) {
$( '#bodyFrame' ).html(data);
}
});
It works fine, but the biggest problem is it doesn't render CSS/Javascript, it only displays plain html.
I tried with <link rel="import" href="https://xyz.com"> now I am getting cross-domain issue.
My question is, is there a way to display an external website inside an HTML page with correct css and js rendering (I don't have control on this part on server side) without IFrame/embed/object tags? I searched lot of questions on SO, most of them tell to use ajax but this have css issue. Can anyone help me in this?
Well, I think that you have at least few options.
Do like I just did for my project where I need to be able to show whole pages offline: load the HTML for that page, iterate through it (with regular expressions) to find out all resource links (JS, CSS, images) and download those (store to file system). Once downloaded, change the URL to URI of your local file on initial HTML. After that show that HTML for user.
Few special things to mention about this way in no particular order:
Implement cache of your own to speed this up.
Use blacklisting for URLs that you don't want to download.
caolan's Async.js library is just great for this.
For CSS resources you need still to download images within it and change the links to those too.
Images can be converted just to Base64 representation inside HTML for less callbacks to handle.
This way you can use the iframes.
This is pretty much related to first one but go through the HTML on your success callback and get all the links for JS and CSS and use technique described here to reload those for you.
Here is summary of that method:
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref);
Related
There's a static page myapp/page.html and a static file in same directory myapp/data.txt. I would like to open that page in Browser from the file system, without web server, and get content of the myapp/data.txt file. It should be possible periodically reload that file to check if its content changed.
fetch('file:///myapp/data.txt') is not working because of some security error Fetch API cannot load file:///myapp/data.txt
Loading as an image img.src='data.txt' also not working, it loads the file it could be seen in the networking tab, but when you try to read it as the image content it tells that image is broken.
As a last resort it's possible to change data.txt into data.js and load it via script.src='data.js' but maybe it's somehow possible to load it as a text too?
As a last resort it's possible to change data.txt into data.js and load it via script.src='data.js' but maybe it's somehow possible to load it as a text too?
Yeah, you could use the old JSON-P method, but with a statically-named function.
Basically, you have in your main script something like this:
window.onDataLoad = (data) => {
// do something with data here
}
// Inject script tag wherever you want to reload the data
const scriptEl = document.createElement('script');
scriptEl.src = 'data.js';
document.querySelector('head').appendChild(scriptEl);
Then, in your data.js, something like:
window.onDataLoad( << YOUR DATA HERE >> );
Finally... just wanted to note that I sympathize! It's ridiculous that fetch() can't handle this. What a great opportunity to abstract the fetching of data from HTTP, when moving away from XHR. Sadly, this didn't happen.
I am trying to use webview element in a universal app using javascript. My aim is to browse some websites adding some content of my own to its html document.
First, I set src attribute of webview to www.example.com and it browses the site. This was just to make sure the webview is capable of browsing the site.
Next, I tried getting the html and load it to webview using navigateToString method like this:
$.get(url, function (data) {
webView.navigateToString(data);
});
This causes the page to be loaded out of shape (aperarently some .js or .css files are not loaded or blocked from running), or it isn't even loaded.
I wonder what is the difference loading the page by its url and loading its html by manually like this. And is there a workaround I can overcome this problem.
Note: I'm new at both js and html.
A web page is usually not made of a single HTML file. In order to make it work, you will have to retrieve not only the HTML but also the javascript and the css files.
This can be a tedious work.
If you are trying to open something from the web, the easiest way is to perform a regular navigate() which will take the URI as parameter and perform a "full" browse (as the browser will do). The retrieval/loading of the CSS/JS will be done for you.
If you want to open a local page (local to your application), navigateToString() is a good path but you will have to host locally all the page dependencies (css/js fiels) or embed all the style and code in the HTML page itself.
I need to process html files that have corrupted script files that are added to it via tag.
Im planning to remove all script tag present in the webpage via phantomjs.
But on opening the webpage via webpage.open(), phantomjs parse error is thrown since it cannot parse the JS content within the script tag.
Here is an example:
<html>
<head>
<script>
corrupted JS
if(dadadd
;
</script>
<body>
some content
</body>
</html>
Can someone help me on suggesting the right way to clean this webpage using phantomjs ?
It's not (easily) possible. You could download (not through opening the page, but rather making an Ajax request in page.evaluate()) the static html, then change according to your needs, then assign it to page.content.
This still might not work, because as soon as you assign it to page.content, you're saying that PhantomJS should interpret this source as a page from an unknown domain (about:blank). Since the page source contains all kinds of links/scripts/stylesheets without a domain name, you'll have to change those too in order for the page to successfully load all kinds of resources.
It might be easier to just have a proxy between PhantomJS and the internet with a custom rule to adjust the page source to your needs.
In my application I'm using the overlay effect of jquerytools.
I'm opening an external page inside the overlay as explained in this demo.
In my external page I'm using some javascripts to do validation and so on. My application is using the Struts2 framework.
The problem I have is concerning the performances of the overlay effect. In the web server (apache) I'm using the mod_expires to let the browser cache the resources.
The problem is that while the file jquery-1.7.2.min.js gets cached in all the application when opening the overlay it won't be cached because it's name changes with an dynamically generated numerical string.
For example the file name changes in this way:
Main application: jquery-1.7.2.min.js
Inside the overlay: jquery-1.7.2.min.js?_=1386932790620
This numerical string changes everytime, preventing the browser (Chrome) to cache the resource. So every time a user opens the overlay the jquery-1.7.2.min.js gets downloaded slowing down the performances.
You can see this problem in the attached pictures:
Caching:
Non caching:
I guess that the overlay effect of jquerytools is using AJAX to load an external page, so the question is:
is there a way to remove that numeric string from being attached to the resource name?
There'are other solutions to prevent the overlay effect to download everytime the javascript resource?
You can try adding this to your code -
$.ajaxSetup({ cache: true });
This will ensure that no cache-busting strategy is used by jQuery.
I am trying to enable communication between Javascript and Flash via ExternalInterface across domains. The Javascript works great when it is located on the same domain as the SWF. But in one case, the HTML resides on domain A, the javascript and the flash both reside on domain B. I have done all of the following:
The embed tag has allowScriptAccess="always" (and the object has that as a param)
My SWF file's actionscipt has Security.allowDomain("*")
My SWF also calls Security.allowInsecureDomain("*")
Both domain A and domain B have a /crossdomain.xml file which has allow-access-from domain="*"
The SWF is able to call javascript on the page, but when I use Javascript to call functions exposed by ExternalInterface, I get
Error calling method on NPObject! [plugin exception: Error in Actionscript. Use a try/catch block to find error.]
This is ActionScript 2 so ExternalInterface.marshallExceptions is not available.
You should only need two things for this to work:
1) allowscriptaccess=always will allow your swf to send stuff out to the page
2) System.security.allowDomain("yourhtmldomain.com");
Note that it's System.security.allowDomain() in AS2 - it's not the same as AS3 or what you have written above.
number 2 above allows the html page on domainA to call things in the swf on domainB.
The domain your js is hosted on won't matter here, since the browser embeds it on domainA, the script is executed in domainA.
crossdomain.xml is mainly only for loading remote files, which you aren't doing, so you can remove that if you like. (and you probably don't want to have a crossdomain.xml file with allow="*" sitting on your main domain, that's very bad practice)
Since you are loading multiple swfs, you may need to include the security settings in each of those swfs on domain B that are loaded.
You may also need a loader context with the appropriate security settings.
import flash.system.LoaderContext;
import flash.system.ApplicationDomain;
import flash.system.Security;
import flash.system.SecurityDomain;
import flash.net.URLRequest;
import flash.net.URLLoader;
var context:LoaderContext = new LoaderContext(true, ApplicationDomain.currentDomain, (Security.sandboxType == Security.REMOTE) ? SecurityDomain.currentDomain : null);
var l:Loader = new Loader();
l.load(new URLRequest("http://example.com/myswf.swf"), context);
for me a few reason was (i'm using uploadify):
http server haven't permission to write file to destination
swfobject (flash) haven't cross domain access
solution:
object tag in html must have allowScriptAccess="always" it can be done by set param like
$('#file_upload').uploadifySettings('scriptAccess', 'always')
than flash object must have:
import flash.system.Security;
Security.allowDomain('remotedomain.com');
it can be done by compile source with this param, i have that, if you need it write to me with uploadify subject.
Than Remote server, where flash include in the page, must have in the root crossdamoin.xml file with content like:
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
I had this same problem (allowDomain etc. were good), but I send to flash bad parameter - just outputed JSON from ajax call. Problem gone, when I put that json in "", and then parse it into javascript object (via jQuery.parseJSON).
Using AS3 with Flash Player version 10 I could not get ExternalInterface.addCallback() to work correctly for testing locally. I finally got my local copy working by adding the parameter "allowNetworking" with a value of "all" (http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001079.html). Good luck to anyone struggling with this!
In my case, it was because I was modifying the DOM element containing the uploader div.
I used the jquery hide() function to hide the div containing the uploader, and when I realized that caused the above error, I tried a different approach where I set the "float" attribute of the div. In both cases, it broke the uploader.
FWIW, it appears that setting the width/height of the div containing the uploader to 0 does NOT make the error occur.