best way to inject javascript into a iframe - javascript

I'm trying to inject a javascript into a iframe, but nothing works. I've already spent days with this issue, would be great if someone could give me some hints.
Example of subject:
The example.html:
<html>
<head>
</head>
<body>
<iframe src="http://example.com/test.html" id="myFrame">
</iframe>
</body>
</html>
The test.html:
<html>
<head>
</head>
<body background="./bg.jpg">
<p >Text </p>
<p >(<i>Something</i>)<br><img src="./img1.gif" align="left">Text</p>´
</body>
</html>
Desired Output from test.html:
<html>
<head>
<script type="text/javascript"> src="myscript.js</script>
</head>
<body background="./bg.jpg">
<p >Text </p>
<p >(<i>Something</i>)<br><img src="./img1.gif" align="left">Text</p>´
</body>
</html>
I've tried this, but it doesn't work:
The example.html:
<html>
<head>
<script type="text/javascript">
var rawframe = document.getElementById('myFrame');
var doc = rawframe.contentDocument;
if (!doc && rawframe.contentWindow) {
doc = rawframe.contentWindow.document;
}
var script = doc.createElement('script');
script.type = "text/javascript";
script.src = "myscript.js";
document.body.appendChild(script);
</script>
</head>
<body>
<iframe src="http://example.com/test.html" id="myFrame">
</iframe>
</body>
</html>
Thank you all for the help.

Unfortunately, I don't believe this is possible. I know I tried something along these lines before, but due to security reasons, browsers prevented it.

You are appending script to the document of the parent page, not to the frame page.

I'm not sure if this can be achieved at all, but one problem I see is timing.
You would run the javascript code before the content of iframe is loaded, right?

Related

JavaScript Redirect Issue

I'm building a cross-platform app with JavaScript. I want to redirect to a different page (in a different domain) but it is not working. I tried:
<html>
<head>
<script>
function redir() {
window.location.href = "http://www.example.com";
}
</script>
</head>
<body onload="redir()">
</body>
</html>
It gived me a blank page. I tried with a different code, I tried iframe like this:
<html>
<head>
</head>
<body>
<iframe src="http://www.example.com" />
</body>
</html>
But it didn't worked again. It gave me a blank iframe. Can someone help me?
function Redirect() {
window.location="https://www.tutorialspoint.com";
}
<form>
<input type="button" value="Redirect Me" onclick="Redirect();" />
</form>
<body onload="redir()"></body>

how to get content of div in a html from another html

I have two html file
a.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content">
hello every one
</div>
</body>
</html>
and another page
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="result">
</div>
<iframe id="ifr" src="http://example.com/a.html">
</iframe>
<script type="text/javascript">
divv = $('#ifr').contents().find('div#content').clone();
$('#result').html(divv.html());
</script>
</body>
</html>
In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.
You do not need to use an iframe; you can use ajax to do that. It's very straight forward.
$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});
EDIT
As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.
In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.
I guess that could be the right way.
var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(html);

Execute JS on page load without using jQuery

So I know that if you use jQuery you can use $(document).load(function(){}); so that any code you write into the function gets executed after the whole page has loaded, but is there a way of doing something similar if you don't use jQuery and just use JS?
For example...
<html>
<head>
<script type="text/javascript">
var box = document.getElementById('box');
alert(box);
</script>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999;
margin:20px;"></div>
</body>
</html>
If I use this method the alert just says null. So is there a way of making the js code run once the page has loaded?
I use:
<script type="text/javascript">
window.onload = function(){
//do stuff here
};
</script>
This way you don't have to use any onload tags in your html.
The easiest way is to simply put your script at the end of the document, typically just before the closing body tag:
<html>
<head>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999; margin:20px;"></div>
<script type="text/javascript">
var box = document.getElementById('box');
alert(box);
</script>
</body>
</html>
You can use a variety of methods to accomplish this.
The simplest, easiest method would be to simply add the script tag at the end of your body tag:
<html>
<head>
<title> Example </title>
</head>
<body>
<div>
<p>Hello</p>
</div>
<script type="text/javascript">
// Do stuff here
</script>
</body>
</html>
The way jQuery does it is something similar to:
window.onload = function() {
// Do stuff here
}
I usually just do it the second way, just in case.
To ensure cross-browser compatibility, crawl through the source of jQuery and find what they use.
You can use onload in your body tag.
<head>
<script type="text/javascript">
function doSomething() {
//your code here
}
</script>
</head>
<body onload="doSomething()">

open page automatically using javascript

Essentially, all I want to do is open an external web page after the current page is loaded via java script.
open my page -> javascript tells browser to open external page -> external page being loaded into the broser
How may I accomplish this?
you may use this
<html>
<head>
<script type="text/javascript">
function load()
{
window.location.href = "http://externalpage.com";
}
</script>
</head>
<body onload="load()">
<h1>Hello World!</h1>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function load()
{
window.location.href = "http://externalpage.com";
}
</script>
</head>
<body onload="load()">
<h1>Hello World!</h1>
</body>
</html>
Hope it should be window.location. Check the code.
Technically you can:
location.href = "http://example.net/";
… but you should perform an HTTP redirect instead as that is more reliable, faster and better food for search engines.
You can also use the "open" method to open the source file or url on a new window.
window.open("anyfile.*");
or
window.open("http://anylocation.com");
Hi please try this code for page loading time we will redirect whatever u configured the urls.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
window.open('https://google.com');
}
</script>
</head>
<body onload="myFunction()">
</body>
</html>
<body>
<script>
document.body.innerHTML += 'Link';
document.getElementById("link").click();
</script>
<body>

Store contents of a tag in Javascript variable

I am learning Javascript and I am trying to learn some pretty basic stuff. Basically I have some text in a <p> tag which I want to append to a variable. However it is not working an I'm not sure why. Any help will be greatly appreciated.
<html>
<head>
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript">
var x = $('p').html();
document.write(x);
</script>
</head>
<body>
<p class="first">Hello World </p>
</body>
</html>
Wrap your code in $.ready handler:
<script type="text/javascript">
$(function(){
var x = $('p').html();
document.write(x);
});
</script>
The ready handler fires after DOM has loaded and parsed meaning only then you can maipulate tags (or DOM).
You are running your script before The <p class="first">Hello World</p> is reached in your HTML. Put your script in the body instead just after the <p> tag:
<html>
<head>
<script type="text/javascript" src="js/jquery.js"> </script>
</head>
<body>
<p class="first">Hello World</p>
<script type="text/javascript">
var x = $('p').html();
document.write(x);
</script>
</body>
</html>
You can also use jQuery's ready function like some others have said, but that's an inefficient solution since you already know at which point in the document the <p> tag is loaded. It's much better to run your script as soon as it's loaded then to wait for the whole document to load using $.ready.
I can't see anything what isn't working (example)
maybe you should write
jQuery(document).ready(function($){
//your javascript code
})
but if it doesn't work with that either I should remind you that document.write normally replaces the content

Categories

Resources