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
Related
How can I write new lines on a frame in the same window? For now I have it creating a new Window with window.open. But now I need it in a frame.
I have an html with the two frames(form and result) and I need to write in the second by pressing a button on the first frame.
HTML
<html>
<head>
<title> Create Curriculum</title>
<meta charset="UTF-8"/>
</head>
<frameset rows="50%,50%">
<frame id="form" src="from.html"/>
<frame id="curri" src=""/>
</frameset>
You intercat with the form adding info to the inputs and saving the information. There's also a button that generates the curriculum using the info entered below.
JAVASCRIPT:
function genCurriculum() {
//I want to capture the second frame with id "curri"
var curri = parent.document.getElementById("curri");
curri.document.writeln("<h2>Head of the curriculum...</h2>");
//The others writeln for creating the curriculum
}
I want to know how to write in the frame, not in a new window.
And NOT using Jquery, just pure JavaScript. (Teacher requirement)
Is this jsfiddle what you want to have happen?
Html:
<form>
<input name="nextLine" type="text" />
<button type="button">
<span>Add a line</span>
</button>
</form>
<iframe height="100" width="200"></iframe>
JavaScript:
(function () {
'use strict';
var button, iframe, input;
function addLine (cD, input, val) {
return function () {
var body, line;
body = cD.getElementsByTagName('body')[0]
line = cD.createElement('p');
line.innerText = val.toString() + ': ' + input.value;
body.appendChild(line);
val += 1;
}
}
button = document.getElementsByTagName('button')[0];
iframe = document.getElementsByTagName('iframe')[0];
input = document.getElementsByTagName('input')[0];
button.addEventListener('click', addLine(iframe.contentDocument, input, 0), true);
}());
I need to POST form values from one page to another using Javascript.
Now, I know that I could use a server-side technology like ASP.Net or PHP to post values but I am not allowed to use any server side script.
I am aware that using the GET method, I can pass the form values as a query string but the values will not be passed securely (which is an important requirement!)
The conditions listed below:
This code should take the values that are posted to the page and
repost to target page. HTTP POST only (not get).
In no cases, even error, the request should not stop on this bridge page.
The script needs to handle multiple posted values.
Try to use standard javascript (no 3rd party library)
Script needs to work in IE, FF, Safari, most standard browsers
Can anyone please help me find a solution to this or point me to some resource that will help me find the soln? Thanks in advance. Below is the code for passing values as a query string. Can I modify this so that my above requirements are satisfied?
FORM
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function goto_page(page) {
var usbnum = document.getElementById('usbnum').value;
var usbcode = document.getElementById('usbcode').value;
var q_str = '?usbnum=' + usbnum + '&usbcode=' + usbcode;
var url = page + q_str;
window.location = url;
}
</script>
</head>
<form id="form1" method="post">
<div>
USB No: <input name="usbnum" id="usbnum" type="text" size="80" /><br />
USB Code: <input name="usbcode" id="usbcode" type="text" size="80"/>
</div>
Next
</form>
</body>
</html>
BRIDGE PAGE
<html>
<head>
<title>Bridge Page</title>
<script type="text/javascript">
function get_params() {
var url = window.location.href;
var q_str_part = url.match(/\?(.+)$/)[1];
var val_pairs = q_str_part.split('&');
var params = {};
for (var i = 0; i < val_pairs.length; i++) {
var tmp = val_pairs[i].split('=');
params[tmp[0]] = typeof tmp[1] != 'undefined' ? tmp[1] : '';
}
return params;
}
function write_params() {
var params = get_params();
var txt = 'Hello ';
for (var i in params) {
txt += params[i] + ' ';
}
var body = document.getElementsByTagName('body')[0];
body.innerHTML += txt;
}
function write_params() {
var params = get_params();
var num_container = document.getElementById('usbnum');
var code_container = document.getElementById('usbcode');
num_container.innerHTML = params.usbnum;
code_container.innerHTML = params.usbcode;
}
</script>
</head>
<body onLoad="write_params()">
</body>
</html>
POST data can only be handled by server side code. There is no way you can use them in your javascript without help from a server side code.
You can only use GET or you can think about cookies. But at other hand, why do you want to change current page?! you can use AJAX to load more data without refreshing and no need of posting or getting variables.
I have my website
www.aplicatii-iphone.ro
and another
page.html on localhost
<html>
<head>
<title>Object References across Iframes</title>
<script type="text/javascript">
window.onload = function(){
var form = document.getElementById('testForm');
form.testBtn.onclick = sendData;
}
function notify() {
//alert('iframe loaded');
var iframeEl = document.getElementById('ifrm');
if ( iframeEl && iframeEl.parentNode && document.createElement ) {
var newTxt = document.createTextNode('The iframe has loaded and your browser supports it\'s onload attribute.');
var newPara = document.createElement("p");
newPara.className = 'demo';
newPara.appendChild(newTxt);
iframeEl.parentNode.insertBefore(newPara, iframeEl);
}
}
function sendData() { // to form inside iframed document
// frames array method:
// window.frames['ifrm'].document.forms['ifrmTest'].elements['display'].value = this.form.testEntry.value;
var ifrm = document.getElementById('ifrm');
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
var form = doc.getElementById('search-input'); // <------<< search input
form.display.value = this.form.testEntry.value;
form.submit();
}
// test in iframed doc
var counter = 0;
</script>
</head>
<body>
<form id="testForm" action="#">
<p><input type="text" name="testEntry" size="30" value="[enter something]" /> <input name="testBtn" type="button" value="Click Me" /></p>
</form>
<iframe name="ifrm" id="ifrm" src="http://www.aplicatii-iphone.ro" onload="notify()" width="900">Sorry, your browser doesn't support iframes.</iframe>
</body>
</html>
And every time I press the button Click Me, I want that the state of www.aplicatii-iphone.ro to be like a user searched for that value written in "testEntry" from outside of the iframe.
I tried something there ... but I can't figure it out ... any help please?
I took the example from here http://www.dyn-web.com/tutorials/iframes/refs.php
If you know you're using a modern browser, you could use postMessage to communicate between the frames. Here's a good write-up: http://ajaxian.com/archives/cross-window-messaging-with-html-5-postmessage
If you need to support legacy browsers, you could use Google Closure's CrossPageChannel object to communicate between frames.
Unfortunatly, this is not possible due to the Same orgin policy.
And changing the document.domain-value only helps if you try to connect a subdomain with the main-domain.
Edit
If you avoid the same-orgin-problem by using a page on the same website, this should work for you:
window.frames['ifrm'].document.getElementById("search-input").value = document.getElementsByName("testEntry")[0].value;
window.frames['ifrm'].document.getElementById("cse-search-box").submit();
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>
As an exercise, I'm trying to display a tarot card picture, the name of the card, and the meaning on a remote page using YQL/xpath/javascript. I've set up the script like the example on Yahoo but can't get it to display in the browser. Any suggestions as to how to improve it so it will display?
<html>
<head>
<title>Example</title>
<script type='text/javascript'>
function tarot(o){
var div = o.query.results.div;
var output = '';
var title = div[0].strong;
var content = div[0].p.content;
var src = div[1].img.src;
output = "<h3>" + title + "</h3></br><p>" + content + "</p><img src='" + src + "' alt="" />";
document.getElementById('results').innerHTML = output;
}
</script>
</head>
<body>
<div id='results'></div>
<script src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.tarot.com%2Fdaily%22%20and%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'cardHolder'%5D%20%7C%20%2F%2Fdiv%5B%40id%3D'cardMeaning'%5D%22&format=json&diagnostics=true&callback=tarot"></script>
</body>
</html>
Any help is greatly appreciated!
~Larys
P.S. - I updated the callback=functionName part of the code to reflect the most current code. Unfortunately, this doesn't seem to fix the problem. Is there something else I seem to be missing?
You have callback=cbfunc but you haven't defined function cbfunc
The problem I see is that you're never calling your tarot() function.
I think you should change your url end to callback=tarot
Hope this helps. Cheers