I am running Chrome with the --disable-web-security on.
I need to dynamically pick a URL, display the frame contents when loaded, and know exactly when the frame has finished loading.
I would love to know when the frame itself has loaded, and when every CSS etc/ have loaded.
Test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height: 100%" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<title>The title</title>
</head>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
console.log("MAIN content loaded!");
// Get iframe and iframe's window
var iframe = window.frames[ 0 ];
var iframeWindow = iframe.window;
var iframeDocument = iframe.window.document;
// Doesn't work
iframe.addEventListener('load', function( e ) {
console.log("IFRAME loaded!");
});
// Doesn't work
iframeDocument.addEventListener('load', function( e ) {
console.log("IFRAME loaded!");
});
// Doesn't work
iframeWindow.addEventListener('load', function( e ) {
console.log("IFRAME loaded!");
});
iframeWindow.onload = function(){
console.log("IFRAME loaded!");
};
iframeWindow.location = "http://www.google.com";
});
</script>
<!-- NOTE: Eventually, changing "url" will change the iframe source -->
<body style="height:90%;">
<p>App</p>
<form>
<input name="url" type="text" size="20%" value="http://">
</form>
<div id="frame" style="height:100%">
<iframe style="width: 100%; height:100%;" src="">
</div>
</body>
</html>
How can I do this?
I would try first of all wrapping all this js in window.onload to make sure the javascript is firing at the right time.
window.onload=function(){
// confirm that iframeWindow is correctly pointing to element
iframeWindow.onload=function(){
console.log('laoded')
};
};
if that doesn't work , then give the iframe an id
<iframe id="myiFrame" style="width: 100%; height:100%;" src="">
window.onload=function(){
var ifr=document.getElementById('myiFrame');
iframeWindow.onload=function(){
console.log('laoded')
};
};
this should fix it, check console for errors, I have done this before and it worked , if both those don't fix it then there is something else outside this code going on
notice I attached to the iFrame , not the window of the iFrame
Related
When I click the link "show pdf" I want to display the embeded pdf. However there must be something wrong. The pdf will now load. Some help?
Check out my fiddle: http://jsfiddle.net/benjones337/7jkmvLL9/2/
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset=utf-8 />
<script type="text/javascript">
window.onload = function() {
document.getElementById("showPDF").onclick = function() {
document.getElementById("thePDF").style.visibility = "visible";
}
}
</script>
</head>
<body>
<div>
<object data="http://www.elml.org/website/en/download/gitta_databases.pdf" type="application/pdf">
<embed id="thePDF" src="http://www.elml.org/website/en/download/gitta_databases.pdf" width="700" height="575" type="application/pdf" />
</object>
<p><a id="showPDF">Show PDF</a></p>
</div>
</body>
</html>
Avoid using onload event in jsfiddle as this event already happened when the page is "loaded".
Hide the object itself (I moved your id to the parent element) as the embed element is not affected with your style.
jsfiddle.net/7jkmvLL9/6/
I have the following script. With that I am trying to update the div "right" in the jsp page. It's contained in a single file. It does not seem to update. Thanks for your help.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
$('#right').load('score.jsp');
setInterval(function() {
$('#right').load('score.jsp');
}, 10000);
});
</script>
</head>
<body bgcolor="c2f2bd">
Updated
Moved to file score.jsp
<img class="small" src="VTVFile1.jpg" alt="Image not found" onError="this.onerror=null;this.src='demo.jpg';" />
<img class="small" src="VTVFile2.jpg" alt="Image not found" onError="this.onerror=null;this.src='demo.jpg';" />
<img class="small" src="VTVFile3.jpg" alt="Image not found" onError="this.onerror=null;this.src='demo.jpg';" />
<img class="small" src="VTVFile4.jpg" alt="Image not found" onError="this.onerror=null;this.src='demo.jpg';" />
</body>
</html>
Your current code is just raising a load event on the #right div. If you want to load content then you need to specify the location to make the request to, eg:
$('#right').load('/foo/bar/content.php');
It will now take X seconds before the content loads the first time. Is there a way to make the content visible on first load and then refresh at the interval ?
$(document).ready(function() {
$('#right').load('/foo/bar/content.php'); // on load
setInterval(function() {
$('#right').load('/foo/bar/content.php'); // every 3 seconds
}, 3000);
});
I am trying to play a video in IE9 and earlier versions. For that I used activeX plugin to load VLC Media Player (that is my basic requirement).
When I tried to execute my code I got an error thrown:
Unable to get value of the property 'playlist': object is null or undefined
My code as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>VLC API</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(document).ready(function(){
play();
displayPlugins();
$(function(){
$("#vlc").css({ "width": "400px", "height": "300px" });
});
});
function play()
{
var vlc=document.getElementById("vlc");
alert("play video");
var url="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov";
var options=new Array(":aspect-ratio=4:3","-rtsp-tcp");
var id= vlc.playlist.add(url,"",options);
vlc.playlist.playItem(id);
}
function displayPlugins()
{
alert("plugins");
var player="<object type='application/x-vlc-plugin' id='vlc' width='300' height='225' classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase='http://activex.microsoft.com/controls/vb5/comdlg32.cab'></object>";
$("#video_holder").html(player);
}
</script>
</head>
<body>
<div id="video_holder" style="border:1px solid #00FF33; height:350px;"></div>
</body>
Can anybody help me where I'm getting wrong?
You are doing:
var vlc=document.getElementById("vlc");
But on HTML, you have
<div id="video_holder" style="border:1px solid #00FF33; height:350px;"></div>
So in theory you want:
var vlc=document.getElementById("video_holder");
You might have more problems after that, but start here.
I would like to know why my code does not work , any help appreciated.
I want to apply the following css to an Iframe when I hit the escape key, when the dynamically loaded from the same domain (its on the server, not on a remote server) iframe has the focus.
$("document").on("keyup", $('#tiny-iframe').contentWindow.document , (function(e) {
if (e.keyCode == 27) {
$('#full-pres, #tiny-iframe').css({
"width": "400px",
"min-width": "350px",
"position": "relative",
"height":"240px"
});
}
});
This HTML is the iframe html:
<!doctype html>
<html>
<head>
<meta name='viewport' content='width=1024'/>
<title>Presentation Impress</title>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style> p {font-size:70px;}
</style>
</head>
<body>
<div id='jmpress'>
<div id='impress'>
<div id='first' class='step ' data-x='0' data-y='0'>
<p >Première acétate. </p>
</div>
</div>
</div>
<script type='text/javascript' src='/static/javascripts/impress.js'> </script>
<script>impress().init();</script>
</body>
</html>
goes in a div#tiny-iframe which is in a div#full-pres in my main html page.
The code above is loaded via ajax.
THIS POST
How to expose IFrame's DOM using jQuery?
was very helpfull.
You can only do what you are trying to do if the iFrame is in the same domain.
Otherwise the browser will prevent it.
It might be a simple, but the funny thing is i've tried it for almost 2-3hrs and haven't been able to solve it :(.
I have a parent window, which has a text box, and it has a value. I do a window.open and open a client and try to read the value of the parent, but unable to get the value.
Any help!!
I've tried
window.parent.document.getElementById(window.name)
window.parent.document.getElementById('test').value
window.opener.document.getElementById('teast').value
window.parent.opener.document.getElementById('teast').value
window.opener.parent.document.getElementById('teast').value
Almost all the permutation and combination. And its pure HTML.
Due to security restrictions, Javascript is unable to access documents that reside on a separate domain from the current one. So, if your parent is on a different domain from the child, this will never work.
window.opener.document.getElementById('test').value should work.
I've tried that, it ain't work. I'm posting the code
test.html
<html>
<head>
<title>Chat</title>
</head>
<body>
<div id="chatMessages"></div>
<script>
var newWin = null;
var OpenWindow = null;
function popUp(strURL, strType, strHeight, strWidth) {
if (newWin != null && !newWin.closed)
newWin.close();
var strOptions="";
if (strType=="console")
strOptions="resizable,height="+
strHeight+",width="+strWidth;
if (strType=="fixed")
strOptions="status,height="+
strHeight+",width="+strWidth;
if (strType=="elastic")
strOptions="toolbar,menubar,scrollbars,"+
"resizable,location,height="+
strHeight+",width="+strWidth;
alert(window.parent.document.getElementById(window.name));
newWin = window.open(strURL, 'alertWindow', strOptions);
//newWin.document.getElementById("child").value='Str';
newWin.focus();
// send_data(data);
}
function chat() {
popUp('../alert.jsp','console',250,600);
}
</script>
<form name="AlertReceiverOnHeader" onclick="chat()">
<input type="text" value="teast" id="teast" name="teast"/>
</form>
</html>
child.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Alert</title>
</head>
<body onload="load()">
<script language="JavaScript">
function load() {
alert('In load');
alert("001="+window.parent.document.getElementById('teast'));
alert("002="+window.parent.document.getElementById(window.name));
alert("003="+window.opener.document.getElementById('teast').value);
}
</script>
<form name="child">
<input type="text" id="child" value="child"/>
</form>
</body>
</html>