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>
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 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>
I'm trying to combine some dynamic parameters that are sent through the URL into a frame, but nothing works. Tried them inside the tags, outside, before, after... Can somebody shed a light on this?
URL on the top frame is http://www.someurl.com/someparameters.html?country=EN_US. The first script will get the language (EN) and market (US). Then, the frameset is built with another page and our target page, which should be called with the link "http://www.someurl.com/somefolders?LANGUAGE=EN&MARKET=US&somefixedparameters=123"
This is the source code of the frameset that isn't working.
<!DOCTYPE html>
<html>
<script type="text/javascript"><!--
var url = window.location.href;
var language = url.substr(url.indexOf("country=") + 8,2);
var market = url.substr(url.indexOf("country=") + 11,2);
}
</script>
<frameset rows="36px,*" frameborder="0">
<frame id="main" src="header_cgh.html?country=BR_OP" noresize="noresize" scrolling="no" border="1" bordercolor=white>
<frame id="flow" src="">
</frameset>
<script type="text/javascript"><!--
document.getElementById("flow").src = "http://www.someurl.com/somefolders?LANGUAGE=" + language + "&MARKET=" + market + "&somefixedparameters=123";
</script>
</html>
Thanks for your help!
UPDATE: After opening Chrome's Javascript console and inserting the command:
document.getElementById("flow").src = "http://www.someurl.com/somefolders?LANGUAGE=" + language + "&MARKET=" + market + "&somefixedparameters=123"
It returned the expected result. But it won't happen on its own.
Change your script to this:
window.onload = function() {
var url = window.location.href;
var language = url.substr(url.indexOf("country=") + 8,2);
var market = url.substr(url.indexOf("country=") + 11,2);
document.getElementById("flow").src = "/somefolders?language=" + language + "&market=" + market;
}
And put it in a script tag in your head.
Also, as a heads up: if someone requests the main frameset page without a query string, or without the country parameter in there, then indexOf returns -1, and you end up with nonsense in your language and market variables. You'll want to come up with a more robust way of getting that information.
Here is an example using postMessage. See if this handles what you're looking for:
<iframe src="http://a.JavaScript.info/files/tutorial/window/receive.html" id="iframe" style="height:60px"></iframe>
<form name="form">
<input type="text" name="msg" value="Your message"/>
<input type="submit"/>
</form>
<script>
var win = document.getElementById("iframe").contentWindow
document.forms.form.onsubmit = function() {
win.postMessage(
this.elements.msg.value,
"http://a.JavaScript.info"
)
return false
}
</script>
From http://javascript.info/tutorial/cross-window-messaging-with-postmessage
Hi all i want to document.write a hyperlink image inside getjson i tried the following but it doesnt work. could you guys tell me what is wrong with my document write?
<script>
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
document.write("<a id="ok" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="./playicon.jpg"></a>");
});
</script>
Hi all i want to document.write a hyperlink image inside getjson
You can't (not reasonably*). document.write only works during the initial parsing of the page. If you use it after the page finishes loading, it completely replaces the page.
Instead, interact with the DOM. Several ways to do that, but the most obvious based on your code is to have the anchor initially-hidden and then show it after filling in the text area like this:
$("#ok").show();
Full Example: Live Copy | Live Source
(I've changed the playicon.jpg to your gravatar, since otherwise it shows as a broken image on JSBin)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form name="myform">
<textarea name="outputtext"></textarea>
</form>
<a id="ok" style="display: none" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="http://www.gravatar.com/avatar/f69cfb4677f123381231f97ea1138f8a?s=32&d=identicon&r=PG"></a>
<script>
(function($) {
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents;
// shows the link
$("#ok").show();
});
})(jQuery);
</script>
</body>
</html>
* "not reasonably": IF your content were coming from the same origin as the document (it doesn't look like it is), you could do this with a synchronous ajax call. But that would be very bad design.
Please, use createElement instead of document.write
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
//Create A-Element
var link = document.createElement('a');
link.setAttribute('href', 'http://www.mysite.com/master.m3u8?' + encodeURIComponent(siteContents) );
link.id = 'ok';
//Append A-Element to your FORM-Element
var myForm = document.getElementsByTagName('form')[0];
myForm.appendChild(link);
//Create IMG-Element
var img = document.createElement('img');
img.setAttribute('src', './playicon.jpg');
//Append IMG-Element to A-Element (id='ok')
link.appendChild(img);
});
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>