Files published using html, JavaScript, not loading locally - javascript

We have a series of eLearning courses that were developed with Lectora and published for web. Unfortunately, the Lectora source files are lost. All we have are the index file, attendant .js files, and supporting documentation files.
The courses load ready when the index.html files are executed over the network, but not when they are copied to a local machine. There is no error. The window simply says "Loading , please wait".
Is there something I can change in the .html or .js files to enable local loading?
CODE FOR INDEX.HTML FILE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!--GENERATED BY: Lectora Professional Publishing Suite v.9.3(6345) (http://www.trivantis.com) -->
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bear Aware</title>
<script language = "JavaScript" src="trivantis.js"></script>
<script language = "JavaScript" src="trivantis-cookie.js"></script>
<script language = "JavaScript">
<!--
if( is.ieMac )
document.write( '<font size=4>(Note: Internet Explorer for the Macintosh does not support JavaScript access to applets/AJAX. This is a browser limitation, not a shortcoming of the course material. For this reason, Macintosh IE 5 users cannot access course materials incorporating JavaScript/AJAX functions. Please try accessing this course material from a non-Macintosh machine or a non-IE browser on the Macintosh.</font><br /><br />' )
else if( !is.min )
document.write( 'Your browser does not support dynamic html. Please download a current version of either Microsoft Internet Explorer or Mozilla Firefox and try visiting our site again. Thank You.<br /><br />' )
var winW = screen.width
var winH = screen.height
function findWH() {
winW = (is.ns)? window.innerWidth-16 : document.body.offsetWidth-20
winH = (is.ns)? window.innerHeight : document.body.offsetHeight
}
function ReFlow() {
}
onload = init
function init() {
findWH()
}
// -->
</script>
</head>
<frameset rows="0,*" border="0" frameborder="0" framespacing="0" onResize="ReFlow()">
<frame name="titlemgrframe" src="titlemgr.html" resize="no" scrolling='no' marginwidth='0' marginheight='0' />
<frame name="contentframe" src="content.html" resize="no" />
<noframes>
<body>
<p>Your browser does not support frames</p>
</body>
</noframes>
</frameset>
</html>
CODE FOR JS FILE
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bear Aware</title>
<script language = "JavaScript" src="trivantis.js"></script>
<script language = "JavaScript" src="trivantis-cookie.js"></script>
<script language = "JavaScript">
<!--
if( is.ieMac )
document.write( '<font size=4>(Note: Internet Explorer for the Macintosh does not support JavaScript access to applets/AJAX. This is a browser limitation, not a shortcoming of the course material. For this reason, Macintosh IE 5 users cannot access course materials incorporating JavaScript/AJAX functions. Please try accessing this course material from a non-Macintosh machine or a non-IE browser on the Macintosh.</font><br /><br />' )
else if( !is.min )
document.write( 'Your browser does not support dynamic html. Please download a current version of either Microsoft Internet Explorer or Mozilla Firefox and try visiting our site again. Thank You.<br /><br />' )
var winW = screen.width
var winH = screen.height
function findWH() {
winW = (is.ns)? window.innerWidth-16 : document.body.offsetWidth-20
winH = (is.ns)? window.innerHeight : document.body.offsetHeight
}
function ReFlow() {
}
onload = init
function init() {
findWH()
}
// -->
</script>
</head>
<frameset rows="0,*" border="0" frameborder="0" framespacing="0" onResize="ReFlow()">
<frame name="titlemgrframe" src="titlemgr.html" resize="no" scrolling='no' marginwidth='0' marginheight='0' />
<frame name="contentframe" src="content.html" resize="no" />
<noframes>
<body>
<p>Your browser does not support frames</p>
</body>
</noframes>
</frameset>
</html>

This is a hard one to fully answer since it could be a lot of things. It's very common for browsers to refuse to load local content as it can be malicious.
For a start I would point out that the two code samples you have posted are practically identical and are a mix of HTML and JavaScript, they're also incomplete. The HTML references two other libraries which you have not posted called trivantis.js and trivantis-cookie.js.
Assuming that you really do have all of the right files in absolutely the correct structure saved locally...
...I'll take a punt on using The Mark of the Web to tell IE to forget it's security concerns and load local content anyway.
So your HTML would look like this (notice the second line):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0016)http://localhost -->
<html>
<!--GENERATED BY: Lectora Professional Publishing Suite v.9.3(6345) (http://www.trivantis.com) -->
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bear Aware</title>
Failing this there are a few other things that might help:
IE > Tools > Internet Options > Advanced > Security > place a check in Allow active content to run in files on My Computer
Add localhost to your Trusted Sites
Disable any addons your have for IE
Hopefully one of these works. Good luck!

Related

URL in browser's URL bar changes quickly because of web forwarding

I have a VPS with the IP 123.123.123.123 and Apache listens there on port 7010. (I only have ports 7000 ... 7020 for myself).
I have registered a domain mydomain1.com by a domain provider and they offer a "web forwarding" :
Name TTL Type Priority Content Forwards to
*.mydomain1.com 3600 A 0 212.20.xx xx http://123.123.123.123:7010/
It works! Now when I write http://www.mydomain1.com in the browser URL bar, it automatically goes to http://123.123.123.123:7010/.
Problem: the browser URL bar only displays http://www.mydomain1.com for 0.5 seconds, and then displays http://123.123.123.123:7010/ instead, which is not nice in terms of user experience.
How to keep the display http://www.mydomain1.com in the browser URL bar?
Should I hack this with Javascript history.pushState(...)?
Should I do this in .htaccess with some ReverseProxySomething?
Another method?
Going from "Default Forwarding" to "Framed" by the domain provider simply solved the problem.
The only drawback is that this is the resulting HTML, so this means it's some sort of hack...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<frameset frameborder="no" border="0" framespacing="0">
<frame src="http://123.123.123.123:7010/" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<noframes>
<body>
Click to be redirected
</body>
</noframes>
</html>
Still looking for a better / cleaner solution!

iframe containing frameset document not expanding to full height of browser window

Have a problem that's been bugging me now for the past two days :(
I have set up an HTML web page that contains an iFrame that loads a frameset document. Yes I know, frames are ancient tech and should not be used, but that is the output produced from Adobe's RoboHelp tool so I need to deal with it.
I have attempted to add variations of JavaScript code that will resize the iFrame's height to fit the remaining height of the browser window. It works fine in Chrome, Safari, Firefox, etc. , but like most organizations the client has standardized to ancient IE (Internet Explorer 8) and it does not look like they will move forward anytime soon.
An image of the current problem is conveyed here:
Simply put, I cannot get the iFrame to occupy the space remaining between the banner and the footer in Internet Explorer (8). I have used both CSS styling and variations of JavaScript code to "read" (I guess) the height of the "frameset(?)" document in order to pass the height to the innerframe for resizing it. Most of the scripts I have seen rely on the height of the document inside the iFrame, but what happens when you have a frameset?
Here is the code of the main page containing the iFrame:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body {
width:100%;
height:100%
}
</style>
<script language="javascript" type="text/javascript">
function autoHeight(e)
{
alert(e);
if ( e.contentDocument ) {
e.height = e.contentDocument.body.offsetHeight + 35;
}
else {
e.height = e.contentWindow.document.body.scrollHeight + 35;
alert("e.contentWindow = "+ e.contentWindow);
}
}
this.onload = function(e) {
// or add it to the onload attribute of the body tag...
var ifr = document.getElementById('helpFrame');
autoHeight(ifr);
}
</script>
</head>
<body>
<!--banner code here, not too important -->
<iframe frameborder="0" id="helpFrame" align="bottom" src="/RCMP/prod/index.htm" width="100%" height="100%" scrolling="no" style="height:100%;">
Your browser does not support iframes.
</iframe>
<!-- added some paragraphs to actually "push" the footer down for now. -->
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<!--footer code here-->
</body>
</html>
And this is the code for the frameset (contained in the iFrame, from Adobe's RoboHelp published output). A lot of the javascript can be ignored, I believe the focus is on the frameset)
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<title>Orientation Guide To E-Division Headquarters</title>
<meta name="generator" content="Adobe RoboHelp 9" />
<meta name="description" content="WebHelp 5.50" />
</head>
<frameset cols="100%,*" frameborder=no border=0>
<frame src="whnjs.htm">
<frame src="whskin_blank.htm" noresize>
</frameset><noframes></noframes>
</html>
So the challenge is to get that iFrame to go full height (down to the footer) in IE! Any suggestions / solutions would be appreciated. I don't really want to use jQuery if I don't have to - JavaScript and CSS would be nice.
thanks!

How to open a native iOS app from a web app

Summary I have an app with a correctly functioning URL scheme that I'd like to launch from a web app stored on the home screen, and the normal JavaScript redirect methods don't seem to work.
Details I'm trying to create an iOS web app, to be opened in full-screen mode from a link saved on the Home Screen. The web app needs to open a specific native app. I have already registered the url scheme for the native app, and verified that it works correctly - I can open the native app by typing the scheme directly into my Safari address bar, for instance. I can also open it from other applications using the +openURL: method of UIApplication. I would like to also open it with certain arguments from a native web app that can be added to the home screen.
What I'm trying to do is use JavaScript like so inside the native app:
window.location = "myapp://myparam";
When using this code inside the web app I get an alert saying:
"Cannot Open myWebAppName - myWebAppName could not be opened. The
error was "This URL can't be shown".".
This same javascript when executed within Safari works correctly. I get the same result using window.location.replace("myapp://myparam").
The html for the web app is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Carl Veazey">
<!-- Date: 2012-04-19 -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
<body>
<script type="text/javascript" charset="utf-8">
if (window.navigator.userAgent.indexOf('iPhone') != -1) {
if (window.navigator.standalone == true) {
window.location = "myapp://myparam";
} else {
document.write("please save this to your home screen");
};} else {
alert("Not iPhone!");
document.location.href = 'please-open-from-an-iphone.html';
};
</script>
</body>
</html>
What am I doing wrong here? I'm pretty inexperienced with javascript and mobile web so I suspect I'm just missing something obvious.
Your code works if its in mobile safari but NOT if its from a bookmark on the iOS desktop. Never tried it that way before, but thats the issue. If i just set your JS to
<script type="text/javascript" charset="utf-8">
window.location = "myapp://myparam";
</script>
It works in browser, but when bookmarked it fails. It might have to do something with how the url is loaded when its bookmarked since there is no chrome? My guess is that apple doesn't want booked mark pages to access local apps. Also, I've noticed that if I bookmark a locally hosted page, that works in mobile safari, I can't get it to load via bookmark. Its really odd....
Best recommendation I have for you is to make it
<meta name="apple-mobile-web-app-capable" />
instead of
<meta name="apple-mobile-web-app-capable" content="yes" />
This way it will be on the home screen, but will unfortunately load with the chrome. Thats the only solution I can think of.
If you need to open an iOS application if it is installed and also want to preserve your page's functionality, the location.href = 'myapp://?params=...'; won't help since if myapp:// is not registered, the redirect leads user to unreachable destination.
The safest bet seems to be in using an iframe. The following code will open an iOS app if it is installed and will not cause a failure if it is not (though it may alert a user that the page could not be reached if the app is not installed):
var frame = document.createElement('iframe');
frame.src = 'myapp://?params=...';
frame.style.display = 'none';
document.body.appendChild(frame);
// the following is optional, just to avoid an unnecessary iframe on the page
setTimeout(function() { document.body.removeChild(frame); }, 4);
Try like this:
The index page
<html><head></head><body>
<?php
$app_url = urlencode('YourApp://profile/blabla');
$full_url = urlencode('http://yoursite.com/profile/bla');
?>
<iframe src="receiver.php?mylink1=<?php echo $app_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>
<iframe src="receiver.php?mylink2=<?php echo $full_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>
</body>
</html>
the receiver.php page:
<?php if ($first == $_GET['mylink1'])) { ?>
<script type="text/javascript">
self.window.location = "<?php echo $first;?>";
</script>
<?php } if ($second == $_GET['mylink2'])) { ?>
<script type="text/javascript">
window.parent.location.href = "<?php echo $second ;?>";
//window.top.location.href=theLocation;
//window.top.location.replace(theLocation);
</script>
<?php } ?>
To provide an update, iOS14 Beta7 doesn't appear to be opening any local apps via their registered x-callback URLs. 👎
<?php
// Detect device type
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
// Redirect if iPod/iPhone
if( $iPod || $iPhone ){
header('Location:http://example.com');
}
?>
The above will redirect the browser to the inputted URL (http://example.com/) if the device is an iPod or iPhone. Add the script to the top of your web app, make sure you save it as a .php file rather than .html.
Source:
http://www.schiffner.com/programming-php-classes/php-mobile-device-detection/

Web app inside iframe change the parent window location

I have one page where I am using tag. As a source of this iframe I am passing one external webapp. Now when this app is loading, in its home page it has code which checks whether the app is loading inside frame or in parent window. If it is not in parent window then it is getting the refrence to parent window and change the location in such a way that it display itself in parent window.
Now I dont have control over this web app so I cannnot change it's home page, is there any workaround where I can stop this application to change it's parent window location. Here is the sample code I am using. I cannot give the url of the internal webapp. Before I see the alter msg "test", webapp is changing the location of the parent window.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[
window.onload = function()
{
alert('test');
//frames["my_iframe"].onload = function()
//{
//alert("hey");
//}
//this also works for me:
document.getElementById("my_iframe").onload = function()
{
alert("hey");
}
}
// ]]>
</script>
</head>
<body>
Testing iframe....<br>
<iframe name="my_iframe" id="my_iframe" src="http://mywebapp.com" width="100%" height="100%" ></iframe>
</body>
</html>
You are trying to do what is referred to as XSS or cross site scripting, and is, for obvious reasons, impossible in any modern browser due to security mechanisms.
This article discuss this question and offers a 'solution', so to speak.
We Done Been ... Framed!
It's actually about avoid been framed (as the webapp you talk about does) but at the end there seems to be a way to frame any page...

How to dynamically change the "src" or "data" for a PDF Object / Embed file using JavaScript?

I have a web application that is dynamically loading PDF files for viewing in the browser.
Currently, it uses "innerHTML" to replace a div with the PDF Object. This works.
But, is there a better way to get the ID of the element and set the "src" or "data" parameter for the Object / Embed and have it instantly load up a new document?
I'm hoping the instance of Adobe Acrobat Reader will stay on the screen, but the new document will load into it.
Here is a JavaScript example of the object:
document.getElementById(`divPDF`).innerHTML = `<OBJECT id='objPDF' DATA="'+strFilename+'" TYPE="application/pdf" TITLE="IMAGING" WIDTH="100%" HEIGHT="100%"></object>`;
Any insight is appreciated.
I am not sure if this will work, as I have not tried this out in my projects.
(Looking at your JS, I believe you are using jQuery. If not, please correct me)
Once you have populated the divPDF with the object you might try the code below:
$("objPDF").attr({
data: "dir/to/newPDF"
});
Again, I am not sure if this will work for your particular needs but if you attach this code to an event handler you can switch out the data of the object.
You could also wrap it in a function to be used over and over again:
function pdfLoad(dirToPDF) {
$("objPDF").attr({
data: dirToPDF
});
}
If the handler for the PDF is acrobat (it doesn't have to be), it exposes a JS interface that is documented here:
http://www.adobe.com/devnet/acrobat/pdfs/js_api_reference.pdf
See if you can call openDoc(urlToPdf) on document.getElementById('objPDF') -- even if this works, it only works when Acrobat is being used to handle 'application/pdf'
#lark
A slight correction:
$('#objPDF').attr('data','dirToPDF');
The # specifies the objPDF is an ID and not an element name. Though I still don't know if this will work.
#Tristan
Take a look at the jQuery Media plugin. It mentions support for PDF as well, though I have never used it.
Open a PDF-Link in a external window PDFN with a external PDF-Reader.EXE:
Clicking on the following button:
<FORM action="">
<INPUT type="button" value="PDF file"
onclick="window.open('http://www.Dku-betrieb.eu/Pdfn.html',
'PDFN', 'width=620, height=630')">
</FORM>
opens this frameset Pdfn.html in an external window:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
<meta http-equiv="refresh" content="12;url=http://www.dku-betrieb.eu/Pdfn1.html">
<head>
<title>Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset>
<frame src="http://www.dku-betrieb.eu/File.pdf" frameborder=0 name="p1">
</frameset>
</HTML>
which refreshes in 12 seconds to the download of the PDF-Reader:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="de">
<head>
<title>Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset >
<frame src="http://www.dku-betrieb.eu/PDFReader.exe" frameborder=0 name="p2">
</frameset>
</HTML>
showing as result the PDF-file in the external window PDFN.
function pdfLoad(datasrc) {
var x = document.getElementById('objPDF');
x.data = datasrc;
}
This worked for me

Categories