I have this code http://jsfiddle.net/xxL6e2fk/
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
janela = window.open("https://www.sitepor500.com.br");
window.setTimeout(
function() {
alert($(janela.window.document).text());
alert($(janela.window.document).html());
},
5000
);
</script>
It just opens a window and tries to get the "text" and "html" of its content. The "text" is displaying the content correctly but the "html" is not. Anyone has any idea how to solve this problem?
there is no html on janela.window.document try using janela.window.document.documentElement instead or targeting the body tag within the new window.
$("body", janela.window.document.documentElement).html()
You can use something like this:
var janela = window.open('https://www.sitepor500.com.br');
janela.onload = function () {
setTimeout(function () {
console.log(janela.document.documentElement.outerHTML)
}, 2000);
}
But this can work only if you are asking it from the same domain (sitepor500.com.br)
Related
I wrote the same code in two JSFiddle, and they do not behave the same way :
HTML:
<p id='complete'></p>
JS:
document.onreadystatechange=fnStartInit;
function fnStartInit()
{
var state = document.readyState
if (document.readyState === 'complete')
{
document.getElementById('complete').innerHTML = 'Document completely loaded'
}
}
Working JSFiddle: https://jsfiddle.net/Imabot/toujsz7n/9/
Non working JSFiddle: https://jsfiddle.net/Imabot/3sLcpa0y/7/
Why do they not behave the same way?
Your first link has the load setting "No wrap - bottom of <head>".
This is equivalent to having HTML like
<head>
<script>
// YOUR SCRIPT HERE
</script>
<head>
<body>
// YOUR HTML HERE
</body>
Your second link has the load setting "On Load":
This is equivalent to having HTML like
<head>
<script>
window.onload = function() {
// YOUR SCRIPT HERE
}
</script>
<head>
<body>
// YOUR HTML HERE
</body>
You can see this if you Inspect the iframe in the lower right. So by the time the second script runs, readystatechange never fires again, so fnStartInit never runs.
Here's a Stack Snippet demonstrating the same problem:
window.onload = () => {
console.log('onload');
document.onreadystatechange = () => {
console.log('ready state just changed');
};
};
I'm trying to add class to an iframe (on same domain) element but check some of the same issues here and came up with the solution.
The iframe is next to body tag and the js was place before the body end tag.
<script>
$(document).ready(function() {
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
});
</script>
There is no error showing in console except the OK log but the class was not adding to #mnucompany.
What else could be wrong? Any big hints will be appreciated.
After our comments :
You should wait the iframe to be loaded !
$(document).ready(function() {
$('#my-iframe').on('load',function (){
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
});
});
$(document).ready(function() {
var myVar = setTimeout(function () {
var $mnuCompany = $('#my-iframe').contents().find('#mnucompany');
if($mnuCompany.length>0){
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
clearTimeout(myVar);
}
});
}, 1500);
For a project i'm dynamically loading content that consist of html and javascript. Until now i was using jquery 1.8.3 but while cleaning up i wanted to update to 1.10.1.
I've narrowed my problem down to the way i use the $.html() function on my content div.
In jquery 1.8.3:
var content = $("#content");
contentDiv.html("<script> alert('Testing'); </script>")
shows a alertbox with the content 'Testing', while in newer jquery versions the same code the string is inserted into the DOM and then the alertbox also appears. I'd wish to not have the tags shown.
context javascript:
this.loadPage = function(page, callback){
$.get(page.ViewFile, function(view){
var content = $("#content");
$("#content").html(view);
}};
The page getting loaded contains, which is stored in the variable view as a string.
<h1>New Content</h1>
<div id="newContent"></div>
<script>
function View(){
this.InitializeView = function(model){
//code
}
this.UpdateView = function (model){
//code
}
}
</script>
Seems that the browser detect the </script> (the end of script tag) that is inside of string as a real closing when we put our code in the head of page.
This is the reason why the error is thrown in the webpage (EXAMPLE):
Uncaught SyntaxError: Unexpected token ILLEGAL fiddle.jshell.net/:22
I guess that you have to move your javascript code into a separate file like main.js, for example.
Tested it locally and it works:
HTML
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="main.js"></script>
<script type="text/javascript">
setTimeout(function () {
$("body").text("Testing now from HTML: using <script>");
setTimeout(function () {
$("body").html("<script>alert('This alert will fail.')</script>");
}, 1000);
}, 2000);
</script>
</head>
<body></body>
</html>
Javascript (main.js)
$(document).ready(function () {
$("body").html("<h1>Wait one second.</h1>");
setTimeout(function () {
$("body").html("<script>alert('Tested')</script>");
}, 1000);
});
Even the text editors detect it as closing tag:
Solution
1. Create scripts from jQuery
var content = $("#content");
var script = $("<script>");
script.html("alert('Testing');");
content.append(script)
1. Use &
Basically you have to replace < with <, > with > and & with &, as described in this answer:
var tagsToReplace = {
'&': '&',
'<': '<',
'>': '>'
};
function replaceTag(tag) {
return tagsToReplace[tag] || tag;
}
function safe_tags_replace(str) {
return str.replace(/[&<>]/g, replaceTag);
}
For more information see this question.
I am trying to make jquery trigger an event when an anchor link has the same URL as the current page. Eventually this will add a class to the anchor link and let me style it differently with CSS but for now I just want it to show an alert box. Code below doesn't seem to work:
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') = buildurl){
alert("Done");
}
});
</script>
Can anybody shine a light on why this isn't working? Or a best practice for similar using JQuery?
Link is: http://www.otahboy.com/shop/index.php?route=information/information&information_id=4
Cheers,
Jack
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') == buildurl){
alert("Done");
}
});
</script>
use equality operator ==
if($('a').attr('href') == buildurl){
alert("Done");
$('a').attr("color","Red");
}
You have an assignment in your if condition. You need to add one = to it.
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') == buildurl){
alert("Done");
}
});
</script>
I use the following code on my site. I'm wondering if I need jQuery to do it or if standard javascript can handle the process.
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$("a[href^='http']").click(function(event) {
event.preventDefault(); // prevent the link from opening directly
// open a pop for the link's url
var popup = window.open( this.href , "", "toolbar=no,menubar=no,location=no,scrollbars=no,resizable=no,status=no,width=340,height=10,left=250,top=175" );
// popup.blur();
// window.focus();
}); }); //]]>
</script>
It's from this page: Pop Under on Click for RSS Feed - Javascript
Yes, and it’s relatively simple: just use document.getElementsByTagName('a') and traverse the array you get, seting onclick for any elements there that have an href attribute with a value that starts with http. And make this a function that is called via the onload attribute in <html> for example.
var hrefs = document.getElementsByTagName('a');
for (i in hrefs) {
if (hrefs[i].href && hrefs[i].href.match(/^http/)) {
hrefs[i].onclick = function(){
var popup = window.open( this.href , "", "toolbar=no,menubar=no,location=no,scrollbars=no,resizable=no,status=no,width=340,height=10,left=250,top=175" );
return false;
}
}
}
you can try this
<div id="divid" onclick="showpop();">click me</div>
<script type="text/javascript">
function showpop(){
window.open(arguments);
return false;
}
</script>
document.getElementById(eleID).onClick = function (){
//do stuff
}