All I need is to show parent page form only if specific element ID loads inside iframe. parent/iframe are on the same domain. How can I achieve that using javascript?
<form id="Search" action="../search.php" target="my-iframe" method="post">
<input type="text" id="location" name="keywords[all_words]" />
<a href="#" onclick="document.getElementById('Search').submit()" >Search</a>
</form>
<iframe id="myiframe" src="../page.html" name="myiframe" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
You can use jQuery to attach a load event to the iframe. Here's a working example: http://jsfiddle.net/kPqbS/
You can use something like this:
// wait for the page to finish loading
window.onload = function(){
// hide your form
document.getElementById('Search').style.display = 'none';
// get the document of the iframe
var frameDocument = document.getElementById('myiframe').contentWindow.document;
// if this is true the element with id 'test' is in the frame
if(frameDocument.getElementById('test')){
// show your form
document.getElementById('Search').style.display = 'block';
}
}
Related
I want to embed the YouTube video by iframe using input tag.
But it's not working where's the mistake -
**The entered URL is :- **
https://www.youtube.com/embed/G20AHZc_sfM
Code in Body tag :-
<input id="url" type="url" placeholder="Video url">
<button onclick="emb()">Embed video</button>
<div id="link"></div>
Code in script :-
function emb(){
var iframe, urrl;
var link= document.getElementById('url')
iframe= document.querySelector("#link");
urrl = `<center><iframe width="480" height="360" src="${link}"></iframe></center>`
iframe.innerHTML = urrl;
}
You can't get the value of an input just by selecting it. Use the value property in link:
var link = document.getElementById('url').value;
I am making a search engine and I have a few issues with my iframe. When a user clicks enter, an iframe is created. I want the iFrame to get as much height as it needs so it blends in with the rest of the page. Here is my code:
<input type="search" id="q" name="q"/>
<input type="submit" value="Search" onclick="submit(); return false;"/>
<script>
function submit() {
page.innerHTML = '<iframe id="results" src="" frameborder="0" scrolling="no" style="overflow:hidden; overflow-x:hidden; overflow-y:hidden; height:150%; width:99%; position:absolute;" height="150%" width="99%" onload=""/>';
document.getElementById('results').src = 'search.php?q=' + query + '&session=<?=$custom_session;?>&no-cache=' + Math.random();
}
</script>
This is a cut down version of the script. The actual page is located at - http://v1k.me/search/alpha/
If you look at the HTML, you will be able to see the whole code.
If you search "mobile", the results will be cut off at 9th result (http://i.imgur.com/jjZKCjC.png), however if you search say "mail", it will display everything and will stop halfway of the page list.
Try this:
<iframe id="results" src="" onload="autosize('results')"></iframe>
<script>
function autosize(ifrId){
var ifr = document.getElementById(ifrId);
var doc = ifr.contentDocument ? ifr.contentDocument : ifr.contentWindow.document;
var obj = ifr.style ? ifr.style : ifr;
obj.height = doc.body.scrollHeight + "px";
}
</script>
I have an iframe on my webpage, now I want 2 buttons above this iframe which will change what is being displayed in that iframe.
So it remains only one iframe always showing, but one button makes it one url then the other button changes it to another url.
How would this be done, Thank you.
Something like this:
<input type="button" onclick="load('page1.html')" value="page 1"/>
<input type="button" onclick="load('page2.html')" value="page 2"/>
<iframe id="my_iframe"></iframe>
<script>
function load(page) {
document.getElementById("my_iframe").src = page;
}
</script>
You'll need to set up event listeners on the buttons to listen for a click event. Inside the event, determine which button was clicked and change the src attribute of your iframe to the content you're wanting to show.
HTML
<button id="one">Test 1</button>
<button id="two">Test 2</button>
<iframe id="iframe" src="http://jsfiddle.net/ChaseWest/Zfq7v/" width="100%" height="600px"></iframe>
JavaScript
var buttonOne = document.getElementById("one");
var buttonTwo = document.getElementById("two");
var iframe = document.getElementById("iframe");
buttonOne.addEventListener("click", buttonClick, false);
buttonTwo.addEventListener("click", buttonClick, false);
function buttonClick(e){
if(e.target.id === "one"){
iframe.src = "http://jsfiddle.net/ChaseWest/Zfq7v/";
}else{
iframe.src = "http://jsfiddle.net/ChaseWest/u73rF/";
}
};
Note: You could just as easily have two separate event functions and not just one buttonClick event`
EXAMPLE
I have a jsp page with iframe in it.
for example: worklist.jsp
<html>
<head>
<body>
<iframe height="15%" marginheight="0px" marginwidth="0px" scrolling="no" src="menuBanner.jsp" style="border:0; padding: 0px; position:absolute;" width="960px">
</iframe>
<div><button data-dojo-type="dijit.form.Button" value="Reload" id="reload" onclick="reload();">Reload</button></div>
</body></head></html>
On click of a button, i need to reload only iframe page.
I tried the below script, but its reloading the whole page(worklist.jsp)
function reload(){
location.reload();
}
You can update/refresh the iframe by setting the src to the current src.
Here is an example.
var test = document.getElementById('iframeId');
test.src = iframe.src;
This way works for cross domain. The example in the comments are less hacky if iFrames are on the same domain.
function reload( {
document.getElementById('iFrameID').contentDocument.location.reload(true);
}
you can try:
var iframe = document.getElementById('YourIFrameId');
iframe.src = iframe.src + '?c=' + Math.random();
i think without changing the src attribute you will not be able to reload your iframe.
You can do like this.
Get the iframe src and assign again to the src of the iframe
<script>
function test()
{
$('#subpage_frame').attr('src',$('#subpage_frame').attr('src')) ;
}
</script>
<iframe src="test.com" onload="Loaded();" id="subpage_frame"></iframe>
<button onclick="test();">Refresh button</button>
I have
<iframe src="correctdata.php" frameborder="0" width="100%" height="330" id="correctdata"></iframe>
<div class="floatright"><a class="button bigger" onclick="window.frames['correctdata'].document.form['correct'].submit();">Submit</a></div>
And correctdata.php contains a form
<form method="post" action="correctdata.php" name="correct" id="correct"></form>
(There is other stuff, but I'd much rather not post it.
Yet when I press submit I get
window.frames.correctdata is undefined
[Break On This Error] window.frames.correctdata.document.form.correct.submit();
try your with "jQuery(...)contents()"
Html:
<iframe src="correctdata.php" frameborder="0" width="100%" height="330" id="correctdata"></iframe>
<div class="floatright"><a class="button bigger" id="submit-iframe">Submit</a></div>
JS:
$('#submit-iframe').bind('click', function(ev) {
ev.stopPropagation();
var correctForm = $("#correctdata").contents().find("#correct");
if (correctForm.length == 0)
alert('error');
else
correctForm[0].submit();
return false;
});
When the iframe is loaded, provided the content document is from the same origin, you should be able to access the content within it. You can do so by limiting the jQuery context like so:
$('#idInTheIframe', $('iframe')[0].contentDocument);
For a live example, see http://jsfiddle.net/jsumners/hSEmH/.