Languages

Menu
Sites
Language
Issues loading iframe content

Hello,

I'm trying to run content loaded within an iframe and it works on some devices, but some just renders a white background (Unless we add like a <h1>Test</h1> tag, then that gets rendered, so the app works.
The webserver running the system that I'm trying to load allows for embedding (CSP), I have never run into issues with that before (Works on other TV brands etc)

When we actually got it loading on one device, it didn't scale to the full resolution somehow and just loaded the entire app on a small part of the screen for some reason.

 

On my test screen (QB13R-T) it works amazingly well - but any other (newer) OM55, QB*** etc it fails for one reason or the other - which makes me suspect it's some privilege that is missing somehow? We also tried upgrading the QB firmware to the latest 1310.1 to no avail.

The main.js and style.css just contains a simple console.log("test") and the style just sets html, body { width: 100%; height: 100% } iframe { width: 100%; height: 100%} so nothing fancy there.

Does anyone have any idea on what next steps should be taken?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Tizen Web App</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js"></script>
</head>
<body>
<h1>Test</h1>
<iframe src="https://player.domain.com" sandbox="allow-scripts allow-same-origin allow-top-navigation"></iframe>
</body>
</html>

 

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://domain.com/MyTestApp" version="1.0.0" viewmodes="maximized">
    <access origin="*" subdomains="true"></access>
    <tizen:allow-navigation>domain.com player.domain.com player.domain.com/* api.domain.com api.domain.com/*</tizen:allow-navigation>

    
    <tizen:application id="zlNUnth0Tc.MyTestApp" package="zlNUnth0Tc" required_version="2.1"/>
    <content src="index.html"/>
    <icon src="icon.png"/>

    <!-- Feature for screen size -->
    <feature name="http://tizen.org/feature/screen.size.all"/>

    <!-- Metadata for UI -->
    <tizen:metadata key="http://tizen.org/metadata/app_ui_type/base_screen_resolution" value="extensive"/>

    <name>MyTestApp</name>

    <!-- Permissions for your app -->
    <tizen:privilege name="http://developer.samsung.com/privilege/contentsdownload"/>
    <tizen:privilege name="http://developer.samsung.com/privilege/drmplay"/>
    <tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
    <tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>
    <tizen:privilege name="http://developer.samsung.com/privilege/widgetdata"/>
    <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <tizen:privilege name="http://tizen.org/privilege/system"/>
	<tizen:privilege name="http://tizen.org/privilege/telephony"/>	
	<tizen:privilege name="http://tizen.org/privilege/power"/>
	
    <!-- Profile for the application -->
    <tizen:profile name="tv-samsung"/>

    <!-- Settings for the application -->
    <tizen:setting context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/>

</widget>

 

Responses

3 Replies
Adam Hills

you can try adding 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">