Display an html iframe object inside an HTA application that uses javascript - javascript

I seek to run the following iframe object inside an HTA application and would like to later convert this to an exe file.
<iframe height="620" class="wizard-frame" style="max-width: 100% !important; border: 1px solid #dadada; overflow-y: hidden;" scrolling="no" src="https://www.rnv-online.de/timetable/?design=3&width=390&destination=" width="390"></iframe>
The appearance of the applicaiton should look as displayed here:
https://www.rnv-online.de/fahrtinfo/fahrplaene/fahrplanauskunfts-widget/
Here is the HTML Code I have come up with:
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<html>
<body>
<iframe
height="620"
class="wizard-frame"
style="max-width: 100% !important; border: 1px solid #dadada; overflow-y: hidden;" scrolling="no" src="https://www.rnv-online.de/timetable/?design=3&width=390&destination=" width="390"></iframe>
</body>
</html>
When I run the HTA file, I receive an error, which I can skip and get the asked widget. However, it is not interactive and I assume Javascript is an issue here. How can I get to work properly?

The page in the script does not work in IE 11 (e.g. calendar and clock do not work at all). If the page doesn't work in IE 11, it won't work in an HTA iframe either.
If you can find a page that actually works with IE 11, then the following information may be of use...
Even with the x-ua-compatible line in the HTA, the external site will get the mshta.exe default user agent header which is MSIE 7.0 by default. To ensure the external site gets an IE 11 header, apply this registry setting:
Windows Registry Editor Version 5.00
[HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION]
"mshta.exe"=dword:00002af8
That will change the mshta.exe default mode from IE=7 to IE=11.
While this answer may appear to be a duplicate of other answers that refer to x-ua-compatible and the FEATURE_BROWSER_EMULATION registry value, I could not find any answers that made it clear that the x-ua-compatible setting does not carry over to the iframe. Here's a sample HTA script that demonstrates the issue:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11">
</head>
<body>
<script>
window.resizeTo(850,650);
alert(document.documentMode + "\n\n" + window.navigator.userAgent);
</script>
<iframe width=800 height=550 src="https://gs.statcounter.com/detect"</iframe>
</body>
</html>

Related

How to rotate a photo in FireMonkey TWebBrowser

I just tried FMX TWebBrowser in Delphi 10.3.3. I could not rotate a photo in img tag. The following page is working in Google Chrome. But it is not working in FireMonkey TWebBrowser of Delphi 10.3.3. What is wrong? Please someone help me!
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
width: 300px;
height: auto;
}
</style>
</head>
<body>
<button onclick="rotate();">Rotate 90 degrees</button>
<br />
<img src="20190228-1.JPG" id="theID" />
<script>
function rotate() {
var imgX=document.getElementById("theID");
imgX.style.transform = "rotate(90deg)";
imgX.style.display = "block";
}
</script>
</body>
</html>
I guess your target platform is Windows. TWebBrowser wraps IE based web browser control on Windows which displays pages in IE7 standard mode by default. This mode doesn't support CSS transformations. You have multiple options to workaround that.
Option 1: Use deprecated -ms-filter CSS property
-ms-filer or filter is Microsoft CSS extension to apply collection of graphic filters to an object. It also supports rotation:
imgX.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
Option 2: Force Egde standard mode via registry
This is also what TWebBrowser documentation encourages you to do on Windows platform. You basically need to enlist your application's EXE name under HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION either manually or programmatically as DWORD value that defines compatibility mode for your application. 11001 ($2AF9) is for IE11 edge mode. See Browser Emulation for further values. This setting will affect all pages loaded in any web browser control within your application.
Option 3: Use x-ua-compatible header to specify legacy mode
You should be able to achieve the same effect as in option 2 by injecting x-ua-compatible header via <meta> tag in your HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
…
See Specifying legacy document modes for more information.
All of the above applies to Windows platform. Keep that in mind when picking from the options. Option 1 most likely won't work on other platforms.
While you're at it consider also separating JavaScript from CSS by leveraging CSS classes:
<style>
img {
display: block;
width: 300px;
height: auto;
}
.rotated {
transform: rotate(90deg);
}
</style>
…
<script>
function rotate() {
var imgX = document.getElementById("theID");
imgX.classList.toggle("rotated");
}
</script>

Chrome 75 - setting iFrame src attribute causes iFrame parent to load the iFrame content

Chrome v75 appears to have introduced a bug whereby if you replace an iFrame's src programatically, it will replace the entire page instead of the iFrame.
This didn't happen on v74 and I can't get a test case to work (yet), it just fails in our site. (The site hasn't changed since going from v74 to v75, only Chrome has changed)
It appears to work fine the first time but then when you change it again (in our case viewing report drill downs) it causes the entire page (i.e. the iFrame's Parent) to load the src you were trying to load into the iFrame.
It also doesn't matter if you use pure Javascript or (in our case) JQuery, both cause the same issue.
EDIT: After a few hours detective work, I've found the bug. Setting the tag in the iFrame's content causes Chrome to load the iFrame's content into it's parent rather than the iFrame itself.
I've setup a Plunker account with a demo: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info
Just so I can post the link to Plunker, here is the code for the main file & the iframe content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onLoaded() {
// find element
let button = document.getElementById("button");
button.addEventListener("click",function(e){
// Add a random number on the end as a cache buster
document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
},false);
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
<div id="div-frame-finance-custom" style="float:left;width:33%">
<iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
no data
</iframe>
</div>
<div style="float:left;margin-left:1em;">
Detail: Loading an iframe page with a <Base> tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
<BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
<BR>Confirmation: Remove the <Base> tag from the header of test2.html & reload, it will work as expected.
</div>
</div>
<br clear=both>
<div>
<button id="button">
Update Frame
</button>
</div>
</body>
</html>
IFrame Content (test2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_parent"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>
Note, using their new layout it doesn't work, but using their legacy layout it does. Feel free to save the files locally and use chrome directly too.
Ok, so this turned out to be a bug in Chrome rather than anything else, so yes, strictly not a SO question, but seeing as SO ranks so well in Google (other search engines are available), I thought it better to leave it here as a solution rather than simply delete it, just incase anyone else has a similar problem.
The reason is outlined as an edit in my question, the solution is to remove the <base target="_parent"> tag from the iFrame and programatically add the 'target="_parent"' attribute to any links in the iFrame.
We do this via jQuery, I'm sure its just as easy via vanilla Javascript.
$('a').attr('target','_parent');
Add that to the javascript that runs when a page has loaded and it'll replace add target="_parent" to any links on the page.
e.g.
<script>
function onLoaded() {
// find all links and add the target attribute
$('a').attr('target','_parent');
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
As #Kaiido says in his comment, its apparently fixed in Chrome v77, but this isn't the current (as of June 2019) stable release, so we've had to add the workaround into production so that our CRM works with Chrome v75. Thanks to #Kaiido for confirming that.

<script src="filename.js"></script> works locally, not over network

I have a web page that originally had embedded JavaScript within a script section, and it worked fine when served up with a simple http server.
I now want to put my JavaScript, which manipulates SVG elements, in separate files, and as a first try, I put it all in a singe .js file:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Some Graphics With SVG</title>
<head>
<meta http-equiv="refresh" content="5">
<style>
#svgContainer {
width: 2188px;
height: 1312px;
background-color: "white";
}
</style>
<script src="all.js"></script>
</head>
<body onload="resagui()">
<div id="svgContainer"></div>
</body>
I should note that the JavaScript function resagui appears at the top of all.js:
function resagui() {
...
}
Everything works great when I test this locally and view the page with file:///... from my browser. But when I try http://ipaddress:port it does not work.
I know that this is not a network issue, as the html file with embedded JavaScript works fine when I try http://ipaddress:port
My Firefox browser console provides two errors:
SyntaxError: expected expression, got '<'
and
ReferenceError: resagui is not defined
The html looks well formed, and there is no '<' character in my .js file.
Thanks for any insight you can provide.
Jay

Can I not use embedded <style> CSS on Android?

I'm debugging a site on an Android HTC Sense. The site uses a lot of inserted content, which comes along with it's own CSS and JS like:
// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
#snippet_id div {border: 1px solid red !important;}
div {border: 1px solid blue !important;}
</style>
</head>
<body>
<div>Hello World</div>
</body>
<html>
This is inserted into an existing page, so it sort these snippets are sort of like iFrames I guess.
Question:
Problem is, that while Javascript works fine, all CSS I'm specifying using <style> tags is being ignored. Any idea why?
EDIT:
Works on:
- Android 4.0.1
Does not work on:
- Android 2.3.1
- IOS 4.1
If I add the CSS to the main.css file being requested when the page loads, all is ok. If it's inside my gadget, it's not working.
EDIT:
So from what I can see, <style> does not seem to work on classes and id. If I use regular HTML elements as selectors it works.
EDIT:
My dev-site is here. I'm using a plugin called renderJs, which encapsultes HTML snippets (along with their CSS and JS) into resuable gadgets. Gadgets content will be appended to the page body, so although a gadget can act as a standalone HTML page, it can also be part of a page.
Example code from my page (I stripped out all gadgets but one below):
index.html - include index_wrapper gadget
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Organization" lang="en" class="render">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/overrides.css">
<script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
<title></title>
</head>
<body class="splash">
<div data-role="page" id="index">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
</div>
</body>
</html>
The page has a gadget called index_wrapper link - code below:
<!DOCTYPE html>
<head></head>
<body>
<div id="index_social" data-gadget="../gadgets/social.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>
Which has another gadget called social here. This gadget includes some CSS, but on the devices in question, it is ignored (just saw, I'm missing a </div> in the index_wrapper, so trying to see if that fixed the problem, too).
The code below includes my fix:
<!DOCTYPE html>
<head>
<style type="text/css" scoped>
// will be ignroed
.el {width: 1px;}
.menu_social {text-align: center; margin: 1em 0;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
...
</head>
<body>
<div class="menu_social">
<div>
<span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
// fallback for old devices which cannot load <style> css
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/social.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
})();
//]]>
</script>
</body>
</html>
So aside from probably missing a closing </div> I'm still wondering why my embedded CSS is not working.
Looking at the generated HTML code (i.e., code as modified by JavaScript) of the demo page suggests that style elements are generated inside body. Although such elements are allowed by HTML5 drafts when the scoped attribute is present, support to that attribute seems to be nonexistent, and the style sheet is applied globally. It is possible however that some browsers do not apply it at all, at least when the style element is dynamically generated.
A better approach is to make all style sheets global to the document, preferably as external style sheets, and use contextual selectors to limit the rules to some elements only. And possibly using JavaScript to change classes of elements, rather than manipulating style sheets directly.
Ok. Ugly workaround:
In the inline section, set this:
<style>
.el {width: 1px;}
</style>
In the page, set hide an element el like this:
// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible"> </span>
Then check for the width when running inline Javascript (which works) and require the inline CSS as a separate file, when the width is not at 1px
// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/translate.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
Ugly and an extra HTTP request, but at least the CSS is working then.

get html source code

I am trying to put the html source code for any webpage in a string using Javascript.
Please tell me if i can do something else to solve my problem..
I am using the following code that i found from another post
function httpGet(theUrl)
{
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
I tried this in IE Firefox and Chrome but i always get the following source code which is the source code for "PAGE NOT FOUND" page..If you any other info please let me know in a comment..
What i am trying is to get html from any webpage like google.com and other webpages..If i can't do that then what can i do?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>404 - PAGE NOT FOUND</title>
<style type="text/css">
body{padding:0;margin:0;font-family:helvetica;}
#container{margin:20px auto;width:868px;}
#container #top404{background-image:url('http://74.53.143.237/images/404top.gif');background-repeat:no-repeat;width:868px;height:168px;}
#container #mid404{background-image:url('http://74.53.143.237/images/404mid.gif');background-repeat:repeat-y;width:868px;}
#container #mid404 #gatorbottom{position:relative;left:39px;float:left;}
#container #mid404 #xxx{float:left;padding:40px 237px 10px;}
#container #mid404 #content{float:left;text-align:center;width:868px;}
#container #mid404 #content #errorcode{font-size:30px;font-weight:800;}
#container #mid404 #content p{font-weight:800;}
#container #mid404 #content #banner{margin:20px 0 0 ;}
#container #mid404 #content #hostedby{font-weight:800;font-size:25px;font-style:italic;margin:20px 0 0;}
#container #mid404 #content #coupon{color:#AB0000;font-size:22px;font-style:italic;}
#container #mid404 #content #getstarted a{color:#AB0000;font-size:31px;font-style:italic;font-weight:800;}
#container #mid404 #content #getstarted {margin:0 0 35px;}
#container #bottom404{background-image:url('http://74.53.143.237/images/404bottom.gif');background-repeat:no-repeat;width:868px;height:14px;}
</style>
</head>
<body>
<div id="container">
<div id="top404"></div>
<div id="mid404">
<div id="gatorbottom"><img src="http://74.53.143.237/images/gatorbottom.png" alt="" /></div>
<div id="xxx"><img src="http://74.53.143.237/images/x.png" alt="" /></div>
<div id="content">
<div id="errorcode">ERROR 404 - PAGE NOT FOUND</div>
<p>Oops! Looks like the page you're looking for was moved or never existed.<br />Make sure you typed the correct URL or followed a valid link.</p>
<div id="banner">
<object width="728" height="90"><param name="movie" value="http://74.53.143.237/images/hg728x90.swf">
<embed src="http://74.53.143.237/images/hg728x90.swf?clickTAG=http://secure.hostgator.com/cgi-bin/affiliates/clickthru.cgi?id=page404" width="728" height="90"></embed>
</object>
</div>
<div id="hostedby">This site is hosted by HostGator!</div>
<div id="coupon">Build your website today for 1 cent! Coupon code: "404PAGE"</div>
<div id="getstarted"><a href="http://www.hostgator.com/?utm_source=internal&utm_medium=link&utm_campaign=page404" title="HostGator Web Hosting" >CLICK HERE TO GET STARTED</a></div>
</div>
<div style="clear:left;"></div>
</div>
<div id="bottom404"></div>
</div>
</body>
</html>
I am trying to put the html source code for any webpage in a string using Javascript
If by "any" you mean pages from origins other than the origin your document is served from, you can't do that from JavaScript running in a browser, because you're using an ajax call and those are restricted by the Same Origin Policy, which says that (for instance) script running in a document on http://stackoverflow.com can't use ajax to load content from http://example.com. (An "origin" is more than just the domain name, there are several aspects to it, see the link for details).
Some of the pages you might request (but probably very few) might support Cross-Origin Resource Sharing, in which case if they allow your origin (probably by allowing all origins), you could use ajax to load their content.
If you're running JavaScript outside the browser (NodeJS, SilkJS, RingoJS, Rhino, Windows Scripting Host, etc.), then the SOP wouldn't apply, but I suspect you'd probably need to use something other than the XMLHttpRequest object to do it.
But fundamentally, in a web page (not an extension/add-on) in a browser, you can't do that.
...but i always get the ... source code for "PAGE NOT FOUND" page
But that sounds like the URL is just wrong.

Categories

Resources