I want to inject iframe head by yui3.The sample code works in FF but IE9 shows the error "YUI is not define". I don't know what happens in IE9.
<head>
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
<script src="./test-yui.js"></script>
</head>
<body>
<iframe src="#" id="frame"></iframe>
</body>
var SC = 'script';
YUI().use('node', function (Y) {
var frame = Y.Node.getDOMNode(Y.one('#frame'));
o = frame.contentWindow.document;
o.open().write(
'<head><' + SC + ' type="text/javascript" src="http://yui.yahooapis.com/3.5.0/build``/yui/yui-min.js"></' + SC + '>'+
'<' + SC + '>YUI().use(\'tabview\', \'node\', function(Y) {});</' + SC + '>'+
'</head>'+
'<body><div class="unit_title" >HELLO WORLD</div></body>');
o.close();
});
Trying to write to iframes can be tricky I would suggest looking at the Frame module in YUI some details on using it can be found here http://www.andrewwooldridge.com/blog/2011/04/14/hidden-yui-gem-frame/
Related
I have a https site from where I need to create a rss feed. I can successfully get rss feed for http site but I have been unsuccessful for https site. i used google, yahoo and many other for reading rss but have been unsuccessful. I need to read rss feed using jquery or js or jsp/java. Any help will be highly appreciated.
//this is just for test
YUI().use('yql', function(Y){
var query = 'select * from rss(0,3) where url = "some https site"'
var q = Y.YQL(query, function(r){
//r now contains the result of the YQL Query as a JSON
var feedmarkup = '<p>'
var feed = r.query.results.item // get feed as array of entries
for (var i=0; i<feed.length; i++){
feedmarkup += '<a href="' + feed[i].link + '">'
feedmarkup += feed[i].title + '</a><br />'
feedmarkup += feed[i].description + '</p>'
}
document.getElementById('qznews').innerHTML = feedmarkup
})
})
//this is just for the test
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<div id="qznews"></div>
Guys I was able to solve my above question using this post from stack overflow:https://github.com/sdepold/jquery-rss
Thanks for anyone taking time/effort on my question.
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="jquery.rss.min.js"></script>
<script>
jQuery(function($) {
$("#rss-feeds").rss("add any https feed link will work perfectly",
{
entryTemplate:'<li>[{author}#{date}] {title}<br/>{teaserImage}{shortBodyPlain}</li>'
})
})
</script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="rss-feeds"></div>
</body>
</html>
I'm currently trying to copy a div to another browser tab with the events still working.
I found ways to do this on the same tab, but not for a different one, for example:
https://api.jquery.com/clone/
jQuery: clone elements AND events
Here's my approach:
var newWindow;
if (navigator.userAgent.match(/msie|trident/i))
{
newWindow = window.open("", "_blank");
}
else
{
newWindow = window.open("about:blank", "_blank");
}
var currentDate = moment().format(L11n.get(".dateTimeFormat"));
var printDate = L11n.get(".printDate") + " " + currentDate;
var cssUrl = $app.appRoot + "rt/main.css";
var jsUrl = $app.appRoot + "app/main.js";
var d3Url = $app.appRoot + "pub/d3.js";
var title = L11n.get(".contractDetail");
var start = "<!DOCTYPE html> \
<html xmlns=\"http://www.w3.org/1999/xhtml\" style=\"height: 100%;\"> \
<head id=\"Head1\"> \
<title>" + title + "<\/title> \
<link href=\"" + cssUrl + "\" rel=\"stylesheet\" type=\"text/css\" /> \
<script src=\"" + jsUrl + "\" language=\"javascript\" type=\"text/javascript\"></script> \
<script src=\"" + d3Url + "\" language=\"javascript\" type=\"text/javascript\"></script> \
<script src=\"pub/jquery.js\" language=\"javascript\" type=\"text/javascript\" /></script> \
<body class=\"detailTabsView limitWidthPrint\" style=\"margin-bottom: 0; margin-top: 0; height: auto;\"> \
<div class =\"detailPrintHeader\">" + printDate + "</div>\
<div class =\"detailContainer\">";
var end = "<\/div><\/body><\/html>";
newWindow.document.write(start + detailHtmlString + end);
newWindow.document.close();
//newWindow.document.$("#dashboardFrame").replaceWith($(".ALL #dashboardFrame").clone(true));
var dash = $(".ALL #dashboardFrame").clone(true, true);
$(newWindow).load(function ()
{
console.log("loaded");
$(newWindow.document.body).find("#dashboardFrame").replaceWith(dash);
});
$(newWindow.document).ready(function ()
{
console.log("ready");
});
newWindow.focus();
The interesting part is this:
var dash = $(".ALL #dashboardFrame").clone(true, true);
$(newWindow).load(function ()
{
console.log("loaded");
$(newWindow.document.body).find("#dashboardFrame").replaceWith(dash);
});
Further explanation:
I have a webapp that, for example, shows a diagram made with D3 (Data-driven-documents). It also shows other information, split up into a tab pane. That diagram has some datapoints that show a tooltip when the user hovers over them.
The app also has a button that opens the current tab in a new window. The tooltips don't work on that new window, but it would be nice if they would.
Edit:
Simple example:
Tab A = source tab, with a button in it that has a click-event bound to it. The event reads, let's say the current time and writes it to an alert box.
Then I open a new tab with javascript, let's call it Tab B. When Tab B is loaded, I want to append the button from Tab A to the body of Tab B. The event on the button still has to work in Tab B.
TL:DR:
You can only solve this by re-binding the events on the new tab in the
ready event
I tried that with this piece of code. You have to pass the event-handler within that piece of code (sry for the long-line-example). Just copy that snipped into your dev-console, paste and run it. You will get an alert();
var newWindow = window.open('about:blank', '_blank');
newWindow.document.write('<!doctype html><html><head><title>Test</title><script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script><script type="text/javascript">$(document).ready(function() { $(window).load(function(e) { alert(\'onload\'); }); });</script><script type="text/javascript">function onload() {alert("load");}</script></head><body><div>Test</div></body></html>');
newWindow.document.close();
You can't get the event from another tab. That's browser restriction. You can use an iFrame for that.
Edit:
As I said you can use an iFrame to retrieve the loaded message. But it also should be possible within a new tab. There is a window.postMessage method in HTML5. You can see which browsers are supportet on caniuse.com. You may also have a very brief look at David Walsh's site. He explains how to use it.
I do not have ressources right now. But you can simple "google" it. Or test it otherwise within your developer console to access a variable declared in windowA on windowB. The result will be undefined
Edit part 2: I don't think it is possible without having a script-ressource or a inline JavaScript in the DOM.
See example:
<!doctype html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#test_button').bind('click', function (e) {
alert('Button was clicked!');
e.preventDefault();
});
$(window).load(function (e) {
var body = '<!doctype html><html><head><title>Test2</title><scr' + 'ipt type=\'text/javascript\' src=\'https://code.jquery.com/jquery-2.1.4.min.js\'></scr' + 'ipt></head><body id="body">' + $('#test_button').clone(true, true).attr({'id': 'test2_button', 'data-time': new Date()}).wrap("<div />").parent().html() + '</body></html>';
console.log(body);
var newWindow = window.open('about:blank', '_blank');
newWindow.document.write(body);
//newWindow.document.write('<!doctype html><html><head><title>Test2</title><scr' + 'ipt type=\'text/javascript\' src=\'https://code.jquery.com/jquery-2.1.4.min.js\'></scr' + 'ipt></head><body>' + + '</body></html>');
newWindow.document.close();
});
});
</script>
<body>
<div id="test">
<button id="test_button">Test-Button</button>
</div>
</body>
</html>
I just copy the #test_button into the new window. As a new window is opened a new DOM is generated without the JavaScript event (bind) of the #test_button.
If you append the JavaScript for event-handling you can of course copy your hole content into a new tab/window. Just move your event-bindings into a JavaScript file and append it like I did with the jQuery-file.
Furthermore you just can open the new tab programmatically within your existing tab as you can't access the other tabs ressource (DOM).
You can pass a parameter as well if you like. Just add a param to the open. See other SO-question.
If it helped to clearify your question please feel free to mark this one as answer.
Edit 3
I hope I got it right this time! Try this one:
JavaScript-file (e. g. test.js)
$(document).ready(function () {
console.log('ready');
$('#test_button').bind('click', function (e) {
alert('Button was clicked!');
e.preventDefault();
});
})
HTML-file
<!doctype html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(window).load(function (e) {
var body = '<!doctype html><html><head><title>Test2</title><scr' + 'ipt type=\'text/javascript\' src=\'https://code.jquery.com/jquery-2.1.4.min.js\'></scr' + 'ipt><scr' + 'ipt type=\'text/javascript\' src=\'test.js\'></scr' + 'ipt></head><body id="body">' + $('#test_button').clone(true, true).attr({'data-time': new Date()}).wrap("<div />").parent().html() + '</body></html>';
console.log(body);
var newWindow = window.open('about:blank', '_blank');
newWindow.document.write(body);
//newWindow.document.write('<!doctype html><html><head><title>Test2</title><scr' + 'ipt type=\'text/javascript\' src=\'https://code.jquery.com/jquery-2.1.4.min.js\'></scr' + 'ipt></head><body>' + + '</body></html>');
newWindow.document.close();
});
});
</script>
<body>
<div id="test">
<button id="test_button">Test-Button</button>
</div>
</body>
</html>
I have a project with brunch/jade/backbone that uses an index.html file which calls in everything using backbone, and jade.
index.html (parts):
<html>
<head>
[...]
<script type="text/javascript" src="data/vendor.js"></script>
<script type="text/javascript" src="data/app.js"></script>
<script type="text/javascript" src="data/data.js"></script>
<script type="text/javascript">
require('initialize');
</script>
</head>
<body></body>
</html>
The vendor.js file includes the generated (using brunch) jquery.js, backbone.js, and other libraries I need there. So it is included before usin the script.
My layout.jade:
body
[blah...blah]
script(src="data/credentials.js")
data/credentials.js:
var username="blah";
var password="bluh";
// alert("test");
$(document).ready(function(){
$("#credentials").html(
'<div class="username">' + username + '<div>' +
'<div class="password">' + password + '<div>' +
);
});
I see that the js file is included in the final html file, but the ready function is never executed, whatever I tried. Funnily, if I uncomment the alert, I see no popup neither.
So why is this file found, loaded, but does not execute? I thought each js file that is loaded within an html file is executed there? So the alert function should fire, shouldn't it?
What did I do wrong here?
I think this should do the trick since you didnt include any JQuery.
window.onload('Example');
function Example()
{
document.getelementbyid(credentials).innerHtml =
'<div class="username">' + username + '<div>' +
'<div class="password">' + password + '<div>';
}
I'm trying to add the video tag and apply MediaElement.js to it.
If I do this, it works correctly (reduced the Video tag for brevity, but doesn't throw any error):
<link rel='stylesheet' href='/_layouts/MediaElementWebPart/mediaelementplayer.min.css' />
<script type="text/javascript" src='/_layouts/MediaElementWebPart/jquery.js'></script>
<script type="text/javascript" src='/_layouts/MediaElementWebPart/mediaelement-and-player.min.js'></script>
<video width='640' height='320' id='MEWP'>
</video>
<script>$('MEWP').mediaelementplayer()</script>
But, if I add the tag through code, .mediaelementplayer() throws SCRIPT438: Object doesn't support property or method 'mediaelementplayer'
<link rel='stylesheet' href='/_layouts/MediaElementWebPart/mediaelementplayer.min.css' />
<script type="text/javascript" src='/_layouts/MediaElementWebPart/jquery.js'></script>
<script type="text/javascript" src='/_layouts/MediaElementWebPart/mediaelement-and-player.min.js'></script>
<div id="videosContainer">
</div>
<script type="text/javascript">
$(function () {
var random = Math.floor((Math.random() * 100000) + 1);
var id = "MEWP-" + random.toString();
var video = "<video width=\'640\' height=\'320\' id=\'" + id + "\' ></video>";
$(video).appendTo('#videosContainer');
$('#' + id).mediaelementplayer();
});
</script>
The video tag's element seems to be found though, per the debugger
[+] $('#' + id)[0] {...} [Object, HTMLVideoElement]
What am I missing here? Any general advice for troubleshoot these kind of things, appreciated.
parent.html : OnClick="popup();"
1. page opens and displays contents
2. but js function isn't working. js function is defined in js file.
3. i checked using firebug, js file loded successfully.
4. it only works after refreshing the page. Any idea please? what am i making mistake?
js function :
<script>
function popup(){
var test = "<html><head>";
test += "<script src= " + '"'+"jqueryTestfile.js"+'"'+ "> <" + '/' + "script>";
test += "</head><body>";
test += "<div id=" + '"' +"anyId" + '"' + ">";
test += "</div>";
test += "</body></html>";
win.document.write(test);
}
</script>
child pop-up and source code looks like :
<html> <head>
<script src = "jQueryTestFile.js"> </script>
</head> <body> <div id = "anyId">
some content here ...
</div> </body> </html>
I resolved my problem after a no. of attempt and would like to share :
<script type="text/javascript">
window.document.close();
</script>
Why were not js functions working even after downloading the files : because of i was opening (pop up) a new window using window.document.write() and this method was causing the problem so i used window.document.close() to force a page to 'finish loading'.
var h = document.getElementsByTagName('head')[0],
s = document.createElement('script');
s.type = 'text/javascript';
s.onload = function () { document.getElementById('hello').innerText = h.innerText; };
s.src = 'http://html5shiv.googlecode.com/svn/trunk/html5.js';
h.appendChild(s);
see: http://jsbin.com/uhoger