I'm trying to create a simple test to modify the content of an iframe from its parent container and to modify the content of the parent container from the iframe. Here's what I have so far:
first.html:
<!doctype html>
<html>
<head>
<title>First</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="shared.js"></script>
<script type="text/javascript" src="first.js"></script>
</head>
<body>
<h1>First</h1>
<iframe src="http://localhost:3000/second.html"></iframe>
</body>
</html>
second.html:
<!doctype html>
<html>
<head>
<title>Second</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="shared.js"></script>
<script type="text/javascript" src="second.js"></script>
</head>
<body>
<h1>Second</h1>
</body>
</html>
shared.js:
function modifyContent(targetContainerElement, targetSelector, sourceString) {
$(targetContainerElement).find(targetSelector).html("Modified by " + sourceString + "!");
}
first.js:
$(document).ready(function() {
var iframe = $("iframe");
modifyContent(iframe.contents(), "h1", "First");
});
second.js:
$(document).ready(function() {
if (!top.document)
return;
modifyContent(top.document.body, "h1", "Second");
});
To run the code, I use python -m SimpleHTTPServer 3000 and navigate to localhost:3000/first.html. The first header is modified and says "Modified by Second!" but the second header just says "Second". What am I missing here?
Try changing the h1 tag inside the iframe when it's completely loaded:
$(document).ready(function() {
var iframe = $("iframe");
iframe.load(function ()
{
modifyContent(iframe.contents(), "h1", "First");
});
});
Plus I think you should rewrite modifyContent :
function modifyContent(isJquery, targetContainerElement, targetSelector, sourceString)
{
if ( isJquery )
targetContainerElement.find(targetSelector).html("Modified by " + sourceString + "!");
else
$(targetContainerElement).find(targetSelector).html("Modified by " + sourceString + "!");
}
just targetContainerElement would work cause you don't really need to wrap it in $() since it's already a jquery object
Related
I want to prevent copying content loaded in iframe. I am using the following code [per this answer], and it works fine.
<html>
<head>
<title>Test</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(window).load(function () {
var $frame = $("#tif");
$frame.contents().bind("copy", function (e) {
e.preventDefault();
});
});
</script>
</head>
<body>
<iframe src="whatever.com" height="768" width="1366" id="tif"></iframe>
</body>
</html>
But when a pdf file is given as the source, the above code fails. Any suggestions?
I've read many tutorials and tried them, but they don't work.
Just for example I wrote this simple code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script>
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
</script>
</body>
</html>
I get Test Message text in my page.
Then I put my JS code to an external file: '/js/js.js'
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
And modify the HTML file to:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/js.js"></script>
</head>
<body>
<p id="testElement"> Html text</p>
</body>
</html>
When I open the HTML file in a browser, I only get Html text. My JS does not work. Please explain what I am doing wrong.
Your problem is that javascript linked in head is executed before the body is loaded, so you can just put the script at the end of the body like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
Check the JavaScript error console.
Your code runs before the document is rendered so the node testElemet doesn't exist.
Either move your script-include down as the last element in the body or wrap your code in a load/ready event.
function on_document_ready(callback) {
if (document.readyState === "complete") {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
}
on_document_ready(function () {
var paragraph = document.getElementById("testElemet");
paragraph.innerHTML = "Test Message";
});
This should work fine:
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement">Html text</p>
<script type="text/javascript" src="/js/js.js"></script>
</body>
</html>
Please make sure that <script type="text/javascript" src="/js/js.js"></script> is placed just before </body>.
Try this
var doSomething = function()
{
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js.js"></script>
</head>
<body onload = "doSomething();">
<p id="testElement"> Html text</p>
</body>
</html>
Try saving both the files in the same folder.
Make use of your browsers developer console, to determine whether any errors have occurred.
Regarding 'onload', you can have a look at this link.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</head>
<body>
<h1 id="popup">dfdfs</h1>
</body>
</html>
i have a simple javascript which shows alert when the h1 id exits ,but i am not getting the alert message.code in jquery also can help.
Put your <script> tag at the end of the body:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Write your script after the element so that it runs after element is present. See the code:
<!DOCTYPE html>
<html>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Plunkr for the same is: "http://plnkr.co/edit/0fznytLHtKNuZNqFjd5G?p=preview"
Because, you're executing the script before document is completely loaded, the element #popup is not found.
Use DOMContentLoaded
Use DOMContentLoaded to check if the DOM is completely loaded.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
if (document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
Using jQuery ready
Using jQuery, you can use ready method to check if DOM is ready.
$(document).ready(function() {
if ($("#popup").length) {
window.alert("hi");
}
});
Moving script to the end of body
You can move your script to the end of body.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
// Move it here
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Your script is above the h1 element that you're trying to retrieve. Because of this, it is being run before the element actually exists.
Either move the script to the bottom of the page, or wrap it in a jQuery ready block. And consider moving it to an external file.
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
try this easy way. no need of jquery.
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if(document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
It is good practice to use the <script> tags in <body> because it improves the performance by loading it quicker.
And then use
<body>
<script>
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
</body>
Below code gives you solution
$(document).ready(function() {
if (document.getElementById("popup")) {
window.alert("hi");
}
});
I'm making a little application with intel xdk I have already passed id values from one page to another. My problem is when I print some links in html I can't pass value from the other page. I'm trying by this way:
<script>
document.write("<a href='#' onclick='sendID('page2.html', '21')'>Link</a>");
</script>
I have passed id value from one page to another but in this case I need to pass from a printed link. Is it possible or there is another way. Thanks!
Also I don't know if there is another way to call a function that receives parameters when the link is printed.
More information. Into my head tag:
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function sendID(dir, id)
{
dir +="?";
nomVec = id.split(",");
for (i=0; i<nomVec.length; i++){
dir += nomVec[i] + "=" + nomVec[i]+"&";
}
dir = dir.substring(0,dir.length-1);
location.href=dir;
}
</script>
</head>
And in my body tag:
<body>
Right link<br>
<br>
<br>
<script>
document.write("<a href='#' onclick='sendID(page2.html, 21)'>Link</a>");
</script>
</body>
In the first link the function is called and I get redirected to the other page, but in the printed link is doesn't work.
You have to do something like this
<body>
<script type="text/javascript">
function sendID(dir, id)
{
dir +="?";
nomVec = id.split(",");
for (i=0; i<nomVec.length; i++){
dir += nomVec[i] + "=" + nomVec[i]+"&";
}
return dir.substring(0,dir.length-1);
}
</script>
<script>
document.write("Link");
</script>
</body>
alternatively
you can also do a document.write(<<escape and put the sendID javascript function here>>) following by the document.write that prints the anchor tag.
<!DOCTYPE html>
<html>
<style type="text/css">
</style>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function sendID(dir, id)
{
dir +="?";
nomVec = id.split(",");
for (i=0; i<nomVec.length; i++){
dir += nomVec[i] + "=" + nomVec[i]+"&";
}
dir = dir.substring(0,dir.length-1);
location.href=dir;
}
</script>
</head>
<body>
click here
<br>
<br>
<script>
document.write("<a href='#' onclick='sendID(page2.html, 21)'>Link</a>");
</script>
</body>
</body>
</html>
So we can do:
<html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function exitpop()
{
my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
//my_window.document.write('somehow add JS');
my_window.document.write('<h1>Popup Test!</h1><br/>');
my_window.document.write('J_\alpha(x) = \sum_{m=0}^\infty \frac{(-1)^m}{m! \, \Gamma(m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha} ');
}
</script>
<body onunload="javascript: exitpop()" >
<h1>JavaScript Popup Example 4</h1>
</body>
</html>
but how to for example add to header of that html page with something like <script type="text/javascript" src="path-to-MathJax/MathJax.js"></script> to enable MathML and tex formulas rendering?
Yep, you just need to concatenate the script tags, like so: jsfiddle demo
The money-shot code sample is:
jswin = window.open("", "jswin", "width=350,height=150");
jswin.document.write("Here's your popup!");
jswin.document.write('<scr'+'ipt>alert("Here\'s your alert()!");</scr'+'ipt>');
Use javascript to create a node named script, and sets it's attributes with javascript. Then append the node to document.head.
<html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function exitpop()
{
var my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
var head = my_window.document.getElementsByTagName("head").item(0);
alert(head.innerHTML);
var script = my_window.document.createElement ("script");
script.src = "a.js";
head.appendChild (script);
alert(head.innerHTML);
}
</script>
<body onunload="javascript: exitpop()" >
<h1>JavaScript Popup Example 4</h1>
</body>
</html>
You can consider using an iframe, you can set its head and body altogether, and you can put it in the window.