HTML content in a Webview is overlapping

Viewed 277

I am trying to show html content inside a webview in Android. I do have a affiliate html link of amazon. This link contains an iframe. But unfortunately, the content in the webview is overlapping, this is how it looks like:

enter image description here

I guess there is something wrong with my webview but I don't know what is wrong. This is my activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:layout_editor_absoluteY="81dp">


<WebView
    android:id="@+id/webView"
    android:layout_width="424dp"
    android:layout_height="534dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp" />

This is my java class:

public class MainActivity extends AppCompatActivity  {
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    WebView wv = (WebView) findViewById(R.id.webView);
    wv.loadUrl("about:blank");
    wv.loadUrl("file:///android_asset/test.html");

  }

As you can see, I am getting the html file from asset folder. This is how the html looks like:

<html>
<body>

<iframe style="width:150px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="https://ws-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=DE&source=ac&ref=tf_til&ad_type=product_link&tracking_id=test&marketplace=amazon&region=DE&placement=B07D83S33Z&asins=B07D83S33Z&linkId=db2ebcb1591dd69fda8b9d440c8060d6&show_border=false&link_opens_in_new_window=false&price_color=333333&title_color=0066c0&bg_color=ffffff">
    </iframe>
</body>
</html>

Why is this content overlapped and not shown properly?

1 Answers

Enabling Javascript will solve your problem

 wv.getSettings().setJavaScriptEnabled(true);
Related