I need to access a javascript variable inside a html iFrame. Below I will mention the code which I have implemented so far.
<script type="text/javascript">
var sessionState = '<%=statusCookie%>'
console.log("======JS sessionState=========="+sessionState);
</script>
<iframe id="rpIFrame" src="http://localhost:8080/playground/rpIFrame.jsp?session="+sessionState>
</iframe>
Here the console log prints the sessionState value correctly. But once I append it with the src in iFrame sessionState becomes empty. Please help me to correct this.
Try this:
<script type="text/javascript">
window.onload=function(){
var sessionState = '<%=statusCookie%>'
document.getElementById("rpIFrame").src = "http://localhost:8080/playground/rpIFrame.jsp?session="+sessionState
}
</script>
<iframe id="rpIFrame"></iframe>
<iframe id="rpIFrame" src="http://localhost:8080/playground/rpIFrame.jsp?session="+sessionState>
</iframe>
<script type="text/javascript">
var sessionState = '<%=statusCookie%>'
document.getElementById("rpIFrame").setAttribute(src,"http://localhost:8080/playground/rpIFrame.jsp?session="+sessionState );
</script>
Related
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
I have a file called iframe.html, which contains the code to for a image slideshow or etc. The code is somewhat like
<html>
<head>
</head>
<body>
<iframe id="i1" src="test.html"></iframe>
<div id='i2'></div>
</body>
</html>
i want to get content of iframe and set i2 with that in jQuery such as:
$(document).ready(){
var i1= $('#i1').contents();
$('#i2').html( i1 );
}
that do not correct, how to resolve that?
Change : <iframe id="i1" src="test.html"></iframe>
to
<iframe id="i1" src="test.html" onload='aaa();'></iframe>
And add :
function aaa(){
var a= $('#i1').contents().find("html").html()
$('#i2').html( a );
}
If you look at the console, you'll probably see a syntax error.
Add the closing parenthese after your $(document).ready and the function keyword, like this:
$(document).ready(function() { // function here
var i1= $('#i1').contents();
$('#i2').html( i1 );
}); // closing parenthese here
I am trying to set the attribute of the script tag for a infomous word cloud as follows:
<head>
function getParameterByName(name)
{
...
}
</head>
<body>
<script type="text/javascript"
async data-infomous-id="javascript:getParameterByName('wcid');"
id="embed"
src="http://www.infomous.com/client2/?width=800&height=600&maxWords=40">
</script>
</body>
But the javascript function is never executed. How can I set the data-infomous-id dynamically?
This should do this trick:
jsFiddle
var elem = document.getElementById('embed');
elem.setAttribute('data-infomous-id', getParameterByName('wcid'));
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>
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>