WebkitView content height overflowing - javascript

image
This is the view of my webview content of which bottom is overflowing and is not visible. What I figured out is the parent view of webview is covering entire screen and the child view is covering entire screen leaving app status bar area. But both of them is having equal dimensions, and this is why my child view is overflowing downward.
I read many solution and most of them I tried but no difference is found.
html file that I am loading
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, heigth=device-height, width=device-width">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta charset="utf-8">
<title>XYZ</title>
<base href=".">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<root id="app-root"></root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
webkit view
static func getWebKitView(uiController : ViewController, handlerName : String) -> WKWebView {
let controller = WKUserContentController()
controller.add(uiController as! WKScriptMessageHandler, name: handlerName)
let config = WKWebViewConfiguration()
config.userContentController = controller
let webKitView = WKWebView(frame: .init(x: 0.0, y: 0.0, width: DeviceInfo().getDeviceBounds().w, height: DeviceInfo().getDeviceBounds().h-2), configuration: config)
webKitView.backgroundColor = UIColor.yellow
webKitView.scrollView.isScrollEnabled = false
// webKitView.frame.size = webKitView.scrollView.contentSize
webKitView.scrollView.contentSize = webKitView.frame.size
webKitView.allowsBackForwardNavigationGestures = true
return webKitView
}
How can I correct this UI issue

Give the Height for Web Kit View 100 points less than the device bounds
and then give y position to your Child view as heightOfYourWebView + 10 so the Button will be below the WebkitView and above the bottom of the screen also give width as 350 and height for button as 30 and the view will not go out of bounds

Related

i'm using location.assign() when i'm scrolling but i'm not able to go back to the previous url

I have an issue with the 'location.assign()' with scrolling to the next page :
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
setTimeout(function() {
location.assign('./index2.html')
}, 1000)
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<script src="./app.js"></script>
</body>
</html>
I am able to go to the next page, but i can't go back to './index.html',
can you help me solve this problem ?

when i assign the value of linewidth to 100 it shows the default linewidth in browser for the rectangle shape

the line width of innerbox remains same for the different values in main.js file
main.js
enter code here
function init(){
let ctx = document.querySelector('#canvas').getContext('2d');
ctx.strokeRect(100,50,200,150);
ctx.lineWidth = 100;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drawing on the canvas</title>
<link rel="stylesheet" href="styles.css">
<script src="main.js"></script>
</head>
<body onload="init();">
<canvas id="canvas" width="400" height="300">Your browser doesn't support the
HTML5 element canvas.
</canvas>
</body>
</html>
You just need to switch the order of individual instructions
ctx.strokeRect(100,50,200,150);
ctx.lineWidth = 100;
to
ctx.lineWidth = 100;
ctx.strokeRect(100,50,200,150);

imgkit (wkhtml2image) cant load javascript

hi i am trying to convert my html code into an image
this i my python code:
def cnv2image():
options = {
"--enable-local-file-access": None,
"--enable-javascript": None,
"--javascript-delay": 10000,
"--debug-javascript": None
}
imgkit.from_file("tweet_embed.html", "result.pdf", options)
and this is my html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<meta content="jpg" name="imgkit-format">
<script async charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
<title>Document</title>
</head>
<body>
<blockquote class="twitter-tweet" data-theme="dark"><p dir="ltr" lang="en">be honest, do you kiss your dog goodnight?</p>— ᴘᴀᴠʟᴏᴠ ᴛʜᴇ ᴄᴏʀɢɪ 🐶 (#PAVGOD) August 18, 2021</blockquote>
</body>
</html>
the problem is that when i try to convet html to image js wont get load and i get a screenshot only from html
this is the result that i get:
this is what i expect:

How to use the result from a <script> function and assign it to style in html [for top & left positioning]

Since CSS can't handle sine or cosine calculations, I am using Math.sin and Math.cos inside a <script> element in my HTML. I'm trying to use the results to position left and top. There just doesn't seem to be an easy solution. My code below works, but I can't use the results in a style element to position left or top.
<p id="GetHeight"></p>
<script>
function myCosFunction(b, angle) {
return Math.cos(angle*Math.PI / 180)*b;
}
document.getElementById("GetHeight").innerHTML = myCosFunction(240, 18);
</script>
You can use positioning like that
For apply left CSS in GetHeight id
document.getElementById("GetHeight").style.left = myCosFunction(240, 18);
same as for top
document.getElementById("GetHeight").style.top = myCosFunction(240, 18);
The other easy way to use the value from script in CSS is giving the innerHTML to style element using JS as follows;
var size=parseInt(myCosFunction(80, 7));
document.getElementById('style').innerHTML="#box{margin-top:"+
size+"px;margin-left:"+
size+"px;height:100px;width:100px;background:red}";
function myCosFunction(b, angle) {
return Math.cos(angle*Math.PI / 180)*b;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style id="style">
</style>
</head>
<body>
<div id="box">
Me
</div>
</body>
<script src="js_function.js"></script>
</html>
Note: I have converted the value to int because the value used in CSS properties should be discrete.
Update:
If you want to get margin-top and margin-left of box form a sin function then you can simply call the function for two times using two variables that is X and Y. Then you can change the parameters of calling function to get different values of X and Y;
var Y=parseInt(mySinFunction(280, 7));
var X=parseInt(mySinFunction(300, 7));
document.getElementById('style').innerHTML="#box{margin-top:"+
Y+"px;margin-left:"+
X+"px;height:100px;width:100px;background:red}";
function myCosFunction(b, angle) {
return Math.cos(angle*Math.PI / 180)*b;
}
function mySinFunction(b, angle) {
return Math.sin(angle*Math.PI / 180)*b;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style id="style">
</style>
</head>
<body>
<div id="box">
Me
</div>
</body>
<script src="sin_fun.js"></script>
</html>

Send Parameters to WebPage

I'm trying to use iOS Native app send a few(getWidth(), getHeight(), getSourceUrl()) parameters to the webpage. I found this is useable, but I don't know how to fix this problem?
The webpage template (this template works on android) is as below:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>auto skip</title>
<script type="text/javascript">
window.onload = function(){
var width = window.javaControl.getWidth();
var height = window.javaControl.getHeight();
var imgUrl = window.javaControl.getSourceUrl();
var imgElH = document.getElementById("img_content_h");
imgElH.width = width;
imgElH.height = height;
imgElH.src = imgUrl;
}
</script>
</head>
<body>
<img id="img_content_h" alt="" />
</body>
I use this code, but it doesn't work!
[self.bridge callHandler:#"getWidth" data:[NSNumber numberWithInt:320]];
[self.bridge callHandler:#"getHeight" data:[NSNumber numberWithInt:64]];
[self.bridge callHandler:#"getSourceUrl" data:#"http://211.155.89.163:28080/FlowKit/uploads/userinfo/20150527/C47F1DC39A31443ACF4EAF3802F06879.png"];

Categories