Develop Reference

iFrame src not working with Base64 Encoded HTML Content in Android Webview

I'm developing a project for an app that will display my react app in a webview.
ReactJS app works perfectly in webview, that is why I assume JS is activated in webview.
But, I'm trying to display a base64 encoded HTML content which I'm trying to display as follows;
<iframe src={`data:text/html;base64,${HtmlContent}`}/>
This approach works fine in the browser (Chrome), but it's not working at all in the webview.
I used srcdoc instead of src. But then I cannot postMessage to parent ReactJS app.
Is there a way to work with srcdoc in this scenario or what could be the problem with the iframe when in webview?

Unfutenally I couldn't manage to work with this approach.
But, since I can control both and of the iframe, simply I created a function in the parent of the iFrame as follows;
useEffect(() => {
// Only create once
// Create a custom function and put it to the window object
window.handleResult = handler;
}, [])
Then access it from inside of the iFrame with;
<script type="text/javascript">
window.top.handleResult({success: params.success, error: params.error})
</script>
This approach worked better actually. If you need one more nested iframe for some reason, you can get this function no matter how deep it is because, iframe content geting "top" window anyway.
I'm sharing this because this problem can be solve with different aproches. Maybe not the best way but it'i a working way.

Http.get loads and parse website partially before getting HTML in Flutter

I am trying to perform web parsing in flutter. I want to grab all episode links and numbers from a certain website https://www2.9anime.to/watch/black-clover-dub.2y44/0wql03
This is my code to parse the html:
var url = 'https://www2.9anime.to/watch/black-clover-dub.2y44/0wql03';
http.Response response = await http.get((url));
dom.Document document = parse(response.body);
List<dom.Element> rapidvideoepisodelinks = document.getElementsByTagName('#servers-container');
List<Map<String, dynamic>> rapidvideoepisodelinkMap = [];
for (var link in rapidvideoepisodelinks) {
rapidvideoepisodelinkMap.add(
{
/////////////////////some logic////////////////////
});
}
var rapidvideoepisodejson = json.encode(rapidvideoepisodelinkMap);
rapidvideoepisodelist = (json.decode(rapidvideoepisodejson) as List)
.map((data) => new Rapidvideoepisodelist.fromJson(data))
.toList();
setState(() {
isLoading = false;
});
But the thing is, the episodes content area takes a few seconds to load. And the http.get is loading the website too early before this part is even loaded. Because of this, I am unable to parse it completely. This area containing the episode is not even loaded, so its HTML isn't parsed. Everything else seems to be working fine except for the areas like this that take additional time to load.
Is there a way to solve this issue?
Like parsing the website after it is completely loaded or something like that.
Any help really appreciated.

Your thinking is not really correct. The reason why you can not parse it is NOT because of partial load. http.get is getting the HTML file. That's all. You are just getting the HTML file and you got it. What you see in your browser is not that HTML file. Your browser first gets HTML file and then find what else it should load from the HTML file and then load JPG files, CSS files, JS scripts etc...
The contents you are trying to parse is manipulated by executing JS script inside the Browser. You can not achieve this with http.get. I am not sure how to achieve what you want in flutter. You may need some kind of pseudo browser in dart if any to load the URL and then parse the resulted html. You will never be able to do it with http.get because you do get the HTML file, but you are actually not looking for that HTML file. I am not sure if you can understand what I mean or not.

Best way to display a Images and Doc files from base64-string - Android and Blackberry

I am trying to display image,docs from base64-string for Android and IOS. I am using inapp browser plugin to display image and doc files in app.
For IOS i am able to display images using below code.But facing issue with Android and Blackberry.
window.open(urlData, "_blank", "location=no,enableviewportscale=yes");
I am passing urlData parameter as base-64 string. Android and Blackberry nothing is displaying. After searching i found this post.
Alternative: just store that whole data string in your database. Then when you render your tag you can simply dump it into the src
attribute:>" />
After inserting above code i am able to display image but how to close the image ? How to open image in popup ? So user can close the image.
Thanks

First, window.open probably isn't working because all URLs have to be granted access specifically, for security. You can try to bypass it with this in your config.xml -- I don't know if it will work for data: URLs.
<access origin="*" subdomains="true"/>
<preference name="WebSecurity" value="disable"/>
If this doesn't work, how to show an image in a pop-up comes down to the design of your app. If you're using something like Ionic Framework, Bootstrap, jQueryUI, or Ratchet, they each have components for Modals or Dialogs you could potentially use. If you're not using a UI framework, you'll have to design your own pop-up div to contain the image tag, that is hidden again when you tap or dismiss it. Finding information on Google about how to do this is not very hard.
Good luck!

I am able to solve this issue in BlackBerry using below steps.
1)Remove webWorks.js from index.html
2)Replace below script inside index.html
<script src="worklight/cordova.js"></script> to <script src="../../cordova.js"></script>
3) Add below code inside js file. Need to pass urlData as Base64 string and filename.
requestFileSystem(LocalFileSystem.PERSISTENT, 7 * 1024 * 1024, function (fs) {
var ft = new FileTransfer(),
localPath = fs.root.toURL() + fileName;
ft.download(urlData, localPath, function (entry) {
entry.file(function (file) { console.log(file.size); });
window.open(localPath, "_blank", "location=yes,closebuttoncaption=Close,enableViewportScale=yes");
}, function (e) { console.log('download error'); console.log(e); });
});

Phonegap android: how to open external url from local html pages?

I am trying to open en external url from a local html file. For example, i am using super.loadUrl("file:///android_asset/www/index.html"); to call local file and the application opens it in the browser provided by DroidGap. However, there is a problem with the external url. In index.html, i am trying to reach http://www.google.com via an image button and the device opens another browser to show www.google.com (in my device, chrome is opening to show the page www.google.com). I want to let DroidGap browser to open both external and local urls in DroidGap browser.

I have achieved this because I needed the same solution. I assume you already know how to load the local file but just in case ...
//By "SomeLocalFile.html" I mean an html file in the /www/ folder of the actual app installation **not** on the server
var ref = window.open('somelocalfile.html', '_blank', 'location=no');
First Add and event listener like this to the main js of your app from which you are calling var ref = window.open().
ref.addEventListener('loadstart', LoadStart); // in YourMainJs.js
Then create a local file called closeInAppBrowser.html some where in your /www/ folder it just so happens that mines is in /www/pages/
Now define the LoadStart function so that when the page starts to load LoadStart() will fire
//I use match(/[^/]+$/g) because I find that matching the file name is just easier than the path.
// This code is place in in YourMainJs.js
fileName = event.url.match(/[^/]+$/g);
if(fileName[0] == "closeInAppBrowser.html"){
// alert("fun load stop runs");
ref.close();
}
Now in the SomeLocalFile.html that you are going to use window.open() with, place a link and js like this.
// in SomeLocalFile.html that was called via the window.open()
<a class="close">Close This Window Like A BOSS!</a>
$('.close').click(function(){
//We use window location cause you can't navigate to any other local file just by using an href in an <a> tag
//We aslo use ../../ because that is the correct path usage from within InAppBrowser to another local file
window.location = '../../pages/closeInAppBrowser.html';
});
Now when you click the link it will attempt to navigate to closeInAppBrowser.html this will trigger LoadStart() and it will check if the event.url file name matches "closeInAppBrowser.html" and if so it will close the window.
I have tested this and it works 100%. Let me know if you have any other questions

Actually there is no need to use child browser plugin, if you upgrade phonegap to 2.3.0 or above, so that you can use InAppBrowser
sample
var ref = window.open(authorize_url, '_blank', 'location=no');
ref.addEventListener('loadstart', function() { me.locChanged(event.url,ref); });

Webview not working as desired in case of HTML5 cache

I have created an application using Titanium Appcelerator in which I am using a webview to show some webpages. All the webpages to be displayed in the webview are HTML5 cache enabled, as I want the webpages to be available even when the application is running offline.
The problem which I am facing is that, the webview is not able to show the cached webpages when there is no network connection. But I have tested all the webpages in the browser, and all of them are working fine.
I am facing this problem for Android platform.
This is the code for the webview:
//FirstView Component Constructor
function FirstView() {
//create object instance, a parasitic subclass of Observable
var self = Ti.UI.createView();
var webview = Ti.UI.createWebView({
url: 'http://www.w3schools.com/html/tryhtml5_html_manifest.htm'
});
self.add(webview);
return self;
}
module.exports = FirstView;
The very url is working fine in the browser. How should I solve this?

you can use local html and it use jquery .ajax for load another webpage like that
//inside local page
<div id="pull"></div>
<script>
$.ajax({
url: "http://www.w3schools.com/html/tryhtml5_html_manifest.htm",
cache: true,type: "POST"}).done(function( html ) {
$("#pull").append(html);
});
</script>