call function on iframe mouse move - javascript

I have a function that i need to call on iframe mousemove(). But i didnt found anything like we have in body tag
We have <body mousemove="Function()"> Do we have anything like this for iframe??

The iframe contains its own document, own body element etc.
Try something like this:
var frame = document.getElementById("yourIframeId");
// IE is special
var frameDoc = frame.contentDocument || frame.contentWindow.document;
var frameBody = frameDoc.getElementsByTagName("body")[0];
var testingOneTwo = function() {
console.log("Hello, is this thing on?");
};
frameBody.onmouseover = testingOneTwo;

Did you mean onMouseOver or onFocus?
e.g.
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
<!--
function SayHello()
{
alert("Hi from IFrame");
}
//-->
</script>
</HEAD>
<BODY>
<iframe id="myiFrame" onMouseOver="SayHello()"/>
<iframe id="myiFrame" onFocus="SayHello()"/>
</BODY>
</HTML>

Related

Get iframe content by using JavaScript

I have a HTML file named test.html and below are the content of that file.
<html>
<head></head>
<body>
This is the content.
</body>
</html>
Now I have another file where I want to show the test.html content by iframe and then match the content with something and do something if it matches.
Here is what I'm trying but I'm not getting the iframe data.
<html>
<head></head>
<body>
<iframe id="myIframe" src="test.html"></iframe>
<script>
var iframe = document.getElementById("myIframe");
var iframe_content = iframe.contentDocument.body.innerHTML;
var content = iframe_content;
// var content = "This is the content."; --> I want to get the iframe data here like this. Then match it with the following.
var find = content.match(/ is /);
if (find) {
document.write("Match Found");
} else {
document.write("No Match!");
}
</script>
</body>
</html>
Thanks in advance
As stated in the comments, you need to wait for the iframe content to load. https://developer.mozilla.org/en-US/docs/Web/Events/load
<iframe id="myIframe" src="https://stackoverflow.com/questions/45525117/get-iframe-content-by-using-javascript#"></iframe>
<script>
const myFrame = document.getElementById('myIframe');
myFrame.addEventListener('load', (evt) => {
console.log(evt.target === myFrame);
console.log(evt.target);
});
</script>
Nothing will work unless your web page and iframe have the same origin

Clean the cache of iframe

I have an erroneous html+javascript. It returns a Uncaught ReferenceError: number is not defined, which is expected:
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = number();
</script>
<script id="jsbin-javascript">
function number() {
return 1;
}
</script>
</body>
</html>
However, if I run the code as a string by iframe twice (plnkr), the second run oddly returns a result. It is because the number function is cached somewhere by the first run, which is not what I want.
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<iframe></iframe>
<script>
var iframe = document.querySelector('iframe');
var iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(source);
iframe_doc.close();
var iframe = document.querySelector('iframe');
var iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(source);
iframe_doc.close();
</script>
</body>
</html>
So does anyone know how to clean the cache, such that each run of iframe is completely a new one?
Edit 1 Following the answer of #LeonidVasilyev, I have added in html:
<section id="output">
<iframe></iframe>
</section>
And in JavaScript of my playground:
this.render = function (code) {
var source = prepareSource(code);
var placeholder = document.getElementById("output");
while (placeholder.firstChild) {
placeholder.removeChild(placeholder.firstChild);
}
var iframe = document.createElement("iframe");
placeholder.appendChild(iframe);
var iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(source);
iframe_doc.close();
}
What is odd is that, every time I reload/refresh the page, the paper icon in the Chrome tab and the reload round icon each flash twice. It is because of placeholder.appendChild(iframe), because if i remove this line, it flashes once.
Does anyone know how to avoid this icon twice-flashing?
That is a Chrome bug. In your case document.open() must create new global object. Excerpt from description of document.open() algorithm in HTML specification:
Call the JavaScript InitializeHostDefinedRealm() abstract operation with the following customizations:
For the global object, create a new Window object window.
For the global this value, use the current browsing context's
associated WindowProxy.
Let realm execution context be the created JavaScript execution
context.
Firefox 51 and Internet Explorer 11 properly create new Window object.
As a workaround you can create new iframe node on each iteration:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<div id="placeholder"></div>
<script>
var placeholder = document.getElementById("placeholder");
var iframe = null;
iframe = document.createElement("iframe");
placeholder.appendChild(iframe);
var iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(source);
iframe_doc.close();
iframe = document.createElement("iframe");
placeholder.appendChild(iframe);
var iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(source);
iframe_doc.close();
</script>
</body>
</html>

How to get a reference to an object created on an iframe from the main frame

I have an iframe and I need to use that iframe to create a new object from a script running in the main frame. The problem is, when I instantiate an object in this way, it gives back undefined, so I do not have a way to get the reference and manipulate the object.
The example shows what is going on:
//main.html
<html>
<script>
var iframe = document.getElementsByTagName("iframe")[0];
//it gives back undef instead of the new object
var foo = new iframe.contentWindow.Foo();
</script>
<iframe src="second.html"></iframe>
</html>
//second.html
<html>
<script>
window.Foo = function() {
this.bar = "BAR";
}
</script>
</html>
I know that this is caused, because the execution environment differs for the main frame and the iframe, but is there any way to get a reference for the object created on the iframe?
I tried to put the variable to the iframe's global scope, hoping that it works, but it is still undefined:
//main.html
<html>
<script>
var iframe = document.getElementsByTagName("iframe")[0];
//I hoped this helps (because now the variable is on the same
//global environment), but still undefined
iframe.contentWindow.foo = new iframe.contentWindow.Foo();
</script>
<iframe src="second.html"></iframe>
</html>
//second.html
<html>
<script>
window.Foo = function() {
this.bar = "BAR";
}
</script>
</html>
On the main page yoou define the name of your page:
<head>
<script>
window.name = "home";
var home = window;
var NS_MAIN = {
init:function(){
alert(home.SECOND.globalVal);
}
};
</script>
</head>
<body>
<iframe id="frame" src="secondPage.html" border="1" width="50%" height="50%"></iframe>
your secondPage
<head>
<script>
var NS_SECOND = {
globalVal:null,
init:function(){
home.SECOND= this;
NS_SECOND.globalVal="Hello";
}
};
</script>
</head>
<body>
</body>

JavaScript output to url

I need to output a DIV width into a URL for an iframe but am having some trouble. I have managed to get java to output the div width, but encounter a problem when getting this into the URL. Below is the code I am using (notice the width=
<iframe src="http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=3f43697a78/height=670/width=<script language='javascript'>var e = document.getElementById('Single2');
document.write(e.offsetWidth);</script>"></iframe>
This outputs the URL as:
http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=3f43697a78/height=670/width=var e = document.getElementById('Single2');
document.write(e.offsetWidth);
As you can see the URL has the full javascript in, not just it's output.
Ideally the URL should be as such (lets assume the DIV width is 650px).
http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=3f43697a78/height=670/width=650
Any ideas how I can get this working?
You should do this in the following way (pseudo code)
<iframe id="myIframe"></iframe>
<script>
document.getElementById("myIframe").src = ... // construct URL here
</script>
Let me know if you need a working example.
Here is a working example
<head>
<script type="text/javascript">
function changeContent()
{
console.log("changing src");
var myIframe = document.getElementById("guy");
myIframe.src = "http://steps.mograbi.info/users/sign_in?unauthenticated=true&width=" + myIframe.offsetWidth;
}
</script>
</head>
<body>
<iframe id="guy"></iframe>
<script>
document.onload = changeContent();
</script>
</body>
If you track the network, you will see the width passing..
You can't put <script> tag in src, it will be treated as String.
<iframe id="myiframe"></iframe>
<script type='text/javascript'>
var e = document.getElementById('Single2');
var url = "http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=3f43697a78/height=670/width=" + e.offsetWidth;
document.getElementById("myiframe").setAttribute("src",url);
</script>

how can you determine location of <script> tag from inside said tag?

I am trying to figure out the location of the script tag the current javascript is running in. What is really going on is that I need to determine from inside a src'd, dynamically inserted javascript file where it is located in the DOM. These are dynamically generated tags; code snippet:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>where am i?</title>
<script type="text/javascript" charset="utf-8">
function byId(id) {
return document.getElementById(id);
}
function create_script(el, code) {
var script = document.createElement("script");
script.type = "text/javascript";
script.text = code;
el.appendChild(script);
}
</script>
</head>
<body>
<div id="find_me_please"></div>
<script>
create_script(byId("find_me_please"), "alert('where is this code located?');");
</script>
</body>
</html>
You could give the script an id tag, like this dude does...
You can use document.write to create a dummy DOM object and use parentNode to escape out. For example:
<script>
(function(r) {
document.write('<span id="'+r+'"></span>');
window.setTimeout(function() {
var here_i_am = document.getElementById(r).parentNode;
... continue processing here ...
});
})('id_' + (Math.random()+'').replace('.','_'));
</script>
This assumes you don't actually have control of the <script> tag itself, such as when it's inside a <script src="where_am_i.js"></script> - if you do have control of the <script> tag, simply put an ID on it, as in:
<script id="here_i_am">...</script>
If you are just running this on page load, this works
<script>
var allScripts = document.getElementsByTagName('script');
var thisScript = allScripts[allScripts.length];
alert(thisScript);
</script>

Categories