jQuery get IFRAME content and set that to div - javascript

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

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

How to make a JavaScript result appear on the same page, not in an alert popup window

I was wondering instead of using the alert function to show the function result if there was a way to print it in a text field on the same page as the original variable input. Thanks!
create a div in your body for result like
<div id="result"></div>
update from script like
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = <your value>
Without additional libraries, using only browser functions, you can do this with the document.getElementById() function like this:
<html>
<head>
<title>test</title>
</head>
<body>
<input type="text" id="textfield">
</body>
<script>
function someFunction() {
return "Hello world!";
}
document.getElementById('textfield').value = someFunction();
</script>
<html>

Using JS variable in Html

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>

making and appending a substring from getElementById

I am trying to make a news preview from a separate file (text.html) I want to be able to just display the first 100 characters of a div (id="news"). I don't want to use Ajax or Php. Here is my code, not sure how to make it work, thanks guys.
<body onload="home()">
<div id="content"></div>
<script>
function home() {
var x = document.getElementById("content").innerHTML = '<object width="100%" height="100%" type="text/html" data="text.html"></object>';
var pre = x.substring(0,5);
alert(pre);
}
</script>
</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>

Categories