I want to run mp4 videos on web browser. For that i am using flow player and i want to change href content dynamically on page load. I have used below code.
<html><head>
<title>Wow! This is video</title>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//var Filename = document.getElementById("<%=hdnFileName.ClientID%>").value;
var Filename = "http://www.yahoo.com";
$("a.mylink").attr("href", Filename);
});
</script></head><body>
<!-- -->
<script language="JavaScript" type="text/javascript">
flowplayer("Test1", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
</script></body></html>
Here i will pass anchor tag value externally and i want to set it to anchor tag.
But above code is not wotking. Can you please help?
There are two ways that I know of to achieve what you want
1st: Do not set the href to attribute to anything in your HTML and then use js to set it
HTML Code :
<a style="width: 500px; height: 400px; margin: 10px; display: block" class="Test1" id="Test1"></a>
JS Code :
document.getElementById("Test1").setAttribute("href", Filename);
2nd: Create a new a Tag and replace the a tag with that
JS Code :
var Filename = "http://www.yahoo.com";
var aTag = document.createElement("a");
aTag.style.width = "500px";
aTag.style.height = "400px";
aTag.style.display = "block";
aTag.classList.add("Test1");
aTag.setAttribute("href", Filename);
aTag.id = "Test1";
document.getElementById("Test1").replaceWith(aTag)
The working code:
<html>
<head>
<title>Wow! This is video</title>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head><body>
<!-- -->
<script language="JavaScript" type="text/javascript">
file = "http://techslides.com/demos/sample-videos/small.mp4";//any sample file you want
$("a").attr("href",file);
flowplayer("Test1", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
</script></body></html>
Simply you might be wondering why this works and not yours. So here is the reason.
Two big mistakes what you are doing:
mylink? its nowhere. better if you use
$("#Test1")
or
$(".Test1")
You are loading the script when the document is ready. Which means if you debug your code or view the page source you will find that your href is updated one, but it plays the old video only.
To correct it, you need to set the attribute without the ready function.
Still it doesn't work because if you write it at the top, it will be overwritten by the actual href attribute.
Yahoo.com is not a mp4 video. The attribute you provide make sure is a video.
Related
I want to include a snipped of HTML in multiple pages (each with a different development worflow & framework). In order to avoid having to update each page when that snipped changes, each page is loading a Javascript file that currently looks like this
var html = "lots of html with <style> and <script> tags";
var wrapper = document.createElement("div");
wrapper.innerHTML = html;
document.querySelector('body').appendChild(wrapper);
I'm looking for a better solution to inject HTML-content from another source using Javascript.
Try this:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#selectedTarget').load('path/to/file.html');
});
</script>
</head>
<body>
<div id="selectedTarget">
Existing content.
</div>
</body>
</html>
Well, I have my radio elements that update an iFrame with js code; and that works fine.
Then I have my button below that creates an iFrame in a HTML Division that contains a bunch o' buttons in a list, my aim is to click one of these buttons in the iFrame then have that button to update the above iFrame (the one controlled by the radio's).
How is this possible, can anyone help me? Thanks in advance.
Note: I've tried using <link rel="import" href="parentpage.html"> to import its ID's (if it does that?) then tried using JS to update it that way, to no avail.
What it looks like (layout wise)!
A simple way to do so is to get the button inside the iframe and set the event onclick like this
$(document.getElementById('iFrame2').contentWindow.document.getElementById("iFrame2Button")).click
(function ()
{
$("#iFrame1").attr('src','tests.php');
})
Assuming all the frames are in the same domain, this can be done like this:
<html>
<head>
<title>Main Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var change_iframe1_src = function(new_src) {
$("#iframe1").attr('src', new_src);
}
</script>
</head>
<body>
<!-- frame for which we will change src attribute -->
<iframe id="iframe1" src="" width="400" height="200" border="1"></iframe>
<!-- frame which includes your iframe2 with the buttons-->
<iframe src="iframe.html" width="200" height="200" border="1"></iframe>
</body>
</html>
Now in the iframe2 file attach a click handler for your buttons that should change the src attribute of the iframe1 by calling a function defined in the main page.
Example:
<html>
<head>
<title>iFrame 2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function(e) {
e.preventDefault();
// call function in a parent frame - IMPORTANT LINE BELOW :)
parent.window.change_iframe1_src(this.rel);
})
})
</script>
</head>
<body>
<button rel="iframe3.html">Change iframe src to iframe3.html</button>
<button rel="iframe4.html">Change iframe src to iframe4.html</button>
</body>
The links in the iframe 2 page call the function which is defined in the parent window (the main page / the window which embeded the iframe2 page itself). That function (change_iframe1_src in this example) takes one argument which is a new url.
The src attribute of the frame #iframe1 (your first frame) will be changed to this url.
Again, this works as long as all the frames are in the same domain.
Hope it helped :) Source
I have now spent hours trying to figure out how you do this by reading other's posts - I even got a jsfiddle to work, but can't get this to work in my page.
I want to construct a URL to be used on a page multiple times, so that when I need to update the URL, I only need to do it in one place via a Javascript variable in the header.
I break the URL into two parts because one of the variables will nearly always be the same, but the other most often will be different on different pages.
For example, I declare in my header:
<script language="javascript" type=”text/javascript”>
function goSchedule()
{
var schedulePath = "http://[rootPath]/";
var scheduleFileName = "[extension to document].htm";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href= schedulePath;
}
</script>
And then I can't seem to figure out how to call it in the href. This doesn't work:
<p>Click the following link to test:Test this link</p>
If you answer, please explain how the initial Javascript is created and how to properly call it so it becomes an active URL.
It looks like you are trying to replace the href attribute at the moment the user clicks the link. I suggest you replace the href attribute once for all the link as soon as the page has finished loading.
Make sure you declare your function in the head section
<head>
<!-- Other head declarations ... -->
<script language="javascript" type=”text/javascript”>
function goSchedule() {
var schedulePath = "http://[rootPath]/";
var scheduleFileName = "[extension to document].htm";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href = schedulePath;
}
</script>
</head>
And then bind this method to the onload event of the body element like this
<body onload="goSchedule()">
<!-- Other HTML Stuff Goes Here ... -->
<p>Click the following link to test:Test this link
</p>
</body>
Here is the full html page:
<html>
<head>
<!-- Other head declarations ... -->
<script language="javascript" type="text/javascript">
function goSchedule() {
var schedulePath = "http://support.mozilla.org/";
var scheduleFileName = "en-US/products/firefox?as=u&utm_source=inproduct";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href = schedulePath;
}
</script>
</head>
<body onload="goSchedule()">
<!-- Other HTML Stuff Goes Here ... -->
<p>Click the following link to test:Test this link
</p>
</body>
</html>
When you execute following example using Firefox 3:
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
function openWindow(){
var w = window.open('', 'otherWin', 'width=600,height=600');
w.document.write(document.getElementsByTagName("html")[0].innerHTML);
w.document.close();
reportLinks(w.document.links);
}
function reportLinks(links){
var report = 'links: '+links.length;
for (var i=0;i<links.length;i++){
report += '\n (link='+links[i].href+')';
}
alert(report);
}
//-->
</script>
</head>
<body>
<p>Open Same Content and Show Links Report</p>
<p>Show Links Report</p>
</body>
</html>
You will see that both the number of links shown when clicking on 'Show Links Report' as when clicking on 'Open Same Content and Show Links Report' will be 2. However when having an external JavaScript file reference from this page the behavior seems different (just make an empty file some.js if you want). When clicking 'Open Same Content and Show Links Report' the number of links will be 0.
<html>
<head>
<script language="javascript" type="text/javascript" src="some.js"></script>
<script language="javascript" type="text/javascript">
<!--
function openWindow(){
var w = window.open('', 'otherWin', 'width=600,height=600');
w.document.write(document.getElementsByTagName("html")[0].innerHTML);
w.document.close();
reportLinks(w.document.links);
}
function reportLinks(links){
var report = 'links: '+links.length;
for (var i=0;i<links.length;i++){
report += '\n (link='+links[i].href+')';
}
alert(report);
}
//-->
</script>
</head>
<body>
<p>Open Same Content and Show Links Report</p>
<p>Show Links Report</p>
</body>
</html>
It is probably a matter of loading the page and the moment that reportLinks executed exactly. I assume that the external some.js is added that the document is not completely build up. Is there a way that I can register this reportLinks call for onload event so that I can be sure that document.links is complete?
By the way the example works fine in both cases with Google Chrome.
(added after answer1)
As suggested by Marcel K. I rewrote the example, added also the code the way I really would like to have the thing going. And now testing it, and this simple example seems to work with Firefox and with Chrome.
<html>
<head>
<script type="text/javascript" src="some.js"></script>
<script type="text/javascript">
<!--
function openWindow(){
var w = window.open('', 'otherWin', 'width=600,height=600');
w.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\n<html>\n'+
document.getElementsByTagName("html")[0].innerHTML+'\n</html>');
w.onload=function(){
reportLinks(w.document.links);
};
w.document.close();
}
function reportLinks(links){
var report = 'links: '+links.length;
for (var i=0;i<links.length;i++){
report += '\n (link='+links[i].href+')';
}
alert(report);
}
//-->
</script>
</head>
<body>
<p>Open Same Content and Show Links Report</p>
<p>Show Links Report</p>
</body>
</html>
I had hoped with this simple example to show a simple case of the actual code I am writing. A print preview screen of complicated html in which I want to disable all hrefs once opened. But in that one the onload handler is never called... How can I register an onload handler in this case in the most robust way?
Many thanks,
Marcel
As I said in a comment, this is a very strange issue. But I think it happens because the inclusion of an external script causes a delay in page rendering (of the new page) and its DOM might not be ready to inspect.
My suspicion is supported by the fact that adding the (new) defer attribute seems to solve this issue:
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.
The defer attribute can be set on the original page, as you want an exact copy of it. You can set it if it doesn't matter where a script is being included (e.g., when using document.write in your included file it does matter at which place you include it).
As defer is a Boolean attribute, it is activated when it is simply present (defer) or (when using XHTML) set to itself (defer="defer"). In your case, the script inclusion would read:
<script type="text/javascript" src="some.js" defer></script>
Update regarding your update: you should still insert a Doctype in the main page (consider using the HTML 5 one).
And I think the way you attached your onload event is the best you can do.
But considering the goal you want to achieve (a print preview without hyperlinks): you can also use the "print" media attribute and style hyperlinks like text; that's way more easy than the thing you are doing and it works when JavaScript is disabled.
The only way I could make the example above work portable over Firefox, Chrome and IE is by registering the onload listener through inlined JavaScript in the HTML loaded in the popup window. Following example code shows how.
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>Open Same Content and Show Links Report</p>
<p>Show Links Report</p>
</body>
</html>
This page uses a script in script.js file. Following shows the content of that file.
function openWindow(){
var w = window.open('', 'otherWin', 'width=600,height=600');
w.document.write(
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\n<html>\n'+
document.getElementsByTagName("html")[0].innerHTML+
'\n <script type="text/javascript">\n'+
' function addOnloadListener(listener){\n'+
' if (window.addEventListener) {\n'+
' window.addEventListener("load", listener, false);\n'+
' } else {\n'+
' window.attachEvent("onload",listener);\n'+
' }\n'+
' }\n'+
' addOnloadListener(function(){reportLinks(document.links);});\n'+
' </script>\n'+
'</html>');
w.document.close();
}
function reportLinks(links){
var report = 'links: '+links.length;
for (var i=0;i<links.length;i++){
report += '\n (link='+links[i].href+')';
}
alert(report);
}
When putting the function addOnloadListener directly in the JavaScript file (not inlined in the page) it doesn't work in IE6 because, I believe, it cannot handle the order of script entries correctly. When addOnloadListener was not inlined the inlined call to addOnloadListener didn't work, it simply couldn't find the function in the earlier:
<script type="text/javascript" src="script.js"></script>
The code is only a simple example that doesn't really do a lot. I used it for disabling all links in a print preview popup page.
A simpler way to register an onload listener for a popup window portable over browser is always welcome.
Thanks,
Marcel
I want to add the Digg button on my webpage but don't want to add the script tag directly on the page.
<div class="digg">
<script type="text/javascript">
digg_url = '';
digg_bgcolor = '#99ccff';
digg_skin = 'compact';
digg_window = 'new';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>
What are the some of the unobstrusive ways of adding the JavaScript for the Digg button?
The diggthis.js script either places the button where the script tag lies or looks for an anchor tag with a class name of "DiggThisButton". However, it tries to run before all the DOM elements are created. So, instead of having script included in the head of the HTML document, you need to place it at the bottom of the page.
Here's another way of doing this ( the .... represents any additional content):
<html>
<head>
<script type="text/javascript">
digg_url = '';
digg_bgcolor = '#99ccff';
digg_skin = 'compact';
digg_window = 'new';
</script>
.....
<body>
....
<div class="digg">
<a class="DiggThisButton"></a>
</div>
....
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</html>
Other than setting those "digg_" variables in a separate file, there's not much you can do.
Including an external Javascript from digg.com isn't really "intrusive" anyway.