This is my iframe, it is a google form, which means I cannot edit that.I need this iframe to close or hide by any means i.e., a button, a popup window button or maybe without any button.
$gLink is a google form Link, carried by a php sesssion variable.
<iframe name="target" id="target" width="320" height="187" frameborder="0" src="<?php echo
htmlspecialchars($gLink); ?>"></iframe>
I had tried this, but it did not work.
var iframe=document.getElementById("target");
iframe.parent.removeChild(iframe);
This is another code I tried, which also did not work.
<script>
function myFunction{
var closeIFrame= function(event)
{
if (!event || event.data != "FeedbackWidgetClose")
return;
fifToggle();
}
window.addEventListener("message", closeIFrame, false);
}
</script>
<button onclick="myFunction()">Click me</button>
There is no parent. You should use parentElement:
iframe.parentElement.removeChild(iframe);
A tip for future debugging: open up the web console in your browser so you can detect any errors that occur as your interacting with your page.
Also, your function myFunction should be defined like this (its missing the brackets):
function myFunction() {
Related
This sort of links back to a previous question that I made. The goal was to change the iframe src with a text input. After lots of experimentation, it worked. However, this has arisen a new problem. After I enter the link and submit it, it adds /?link=linkhere to the end of the page and refreshes it. Then, once it's refreshed, the original src comes back, making it useless.
Here's the most important code:
<iframe
id="minecraftFrame"
src="//classic.minecraft.net"
height="500"
width="800"
frameborder="0"
scrolling="no"
allowfullscreen="true">
</iframe>
<input type="text" id="myInput" name="input">
<button class="button" onclick="changeChannel()">Go</button>
<script>
function changeChannel(){
document.getElementById("iFrame").src = document.getElementById("myInput").value;
}
</script>
I'm unsure of what to try at this point, since I'm not too experienced with javascript. I just don't want the main page to refresh after change the src.
You need to prevent default, i.e. stop event bubbling which is resulting in reload. See if that works for you. Seems like it should as you are submitting the form which would result in refresh of the page.
function changeChannel() {
event.preventDefault();
// ...
}
Your code included this --- document.getElementById("iFrame").src
the id of the iframe is "minecraftFrame" and not "iFrame"
or you could use document.querySelector('iFrame')
and stop the page reload with
function changeChannel(e) {
e.preventDefault();
// Code goes here
}
I have a small program in JSP which basically when I click on a document, it opens a new window that allows me to view it. The problem here is it would not show the viewer unless I update or install adobe flash player.
I added a hyperlink link where I can easily click on it and it prompts me to "Allow" to view the document which is fine. The hyperlink looks like below:
<a href="https://get.adobe.com/flashplayer" >Enable Flash</a>
<img border="0" alt="Enable Flash" src="enable_flash.gif"/>
Now, I have to manually click on it, is there a way I can have the hyperlink auto clicked when the pop up windows shows?
I am new to JavaScript and HTML so I figured there is something that I could use like <body onload > .
Edit
This is how my code looks like now:
<body onload="Auto()" > <!--oncontextmenu="return false;"-->
<script>
function Auto(){
<a href="https://get.adobe.com/flashplayer" >Enable Flash</a>
<img border="0" alt="Enable Flash" src="enable_flash.gif"/>
}
</script>
Am I doing anything wrong?
You can simply use click() method
Add id to anchor element
<a href="https://get.adobe.com/flashplayer" id="myLink" >Enable Flash</a>
Add to your script
function automateClick() {
document.getElementById('myLink').click()
}
window.addEventListener("load", automateClick);
Yes..you can use below code and load your link there
$(document).ready(function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
});
OR
$(function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
});
OR
window.onload = function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
}
You can do this with as little as one line, if you want to learn more about the approach I've used, then it may be worth your time looking into functions such as querySelector. Once you have the desired element, you can then simply fire the click method like so.
Demo
<script type="text/javascript">
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
</script>
I just began JavaScript and I've been stuck for a few hours now with an onclick which is not working, or maybe it's the document.getElementById. What I want to do is hide the div when I click on it.
If anyone can explain me what I'm doing wrong I would be grateful!
function closing() {
var closecook = document.getElementById("cookies");
closecook.style.display = "none";
}
#cookies{
display: block;
}
<div id="cookies" onclick="closing()">
Our website is using cookies, click here to close this message.
</div>
Here's my relevant HTML markup:
<body>
<div id="cookies" onclick="closing()">
Our website is using cookies, click here to close this message.
</div>
</body>
<script type="text/javascript" src="functions.js"></script>
Thanks.
Place your "script" block at the end of your body, not outside of it!
alter you the function "closing" to something like this:
function closing() {
var closecook = document.getElementById("cookies");
console.log(closecook);
closecook.style.display = "none";
}
In your browser: open the console by hitting "F12" or right-click anywhere in your browser and select "inspect element" then choose "console".
Now execute your function by clicking on the div.
If you see a "null" in the console: the problem comes from "document.getElementById("");".
If you do not see anything pop up in the console, your javascript file is not loaded properly. Make sure there is no typo in the file name! (Linux is case-sensitiv!).
What I have and I need to do it work properly is when I'm in a "start page" and I click a button like this:
PAGE-1
Point A
It should send me to "another page" where I load dinamically an iframe taking each variable (shopID, type, max-levels and point) from the URL and print it like an iframe this way:
PAGE-2
<iframe id="frame" src="http://myappwebsite/resourcesiframe?shopId=3366&type=image&point=A" width=“XXX" height=“XXX"></iframe>
I've used this javascript snippet but anyway, I can't make it work properly at all.
$(".map-button").click(function (e) {
e.preventDefault();
$("#frame").attr("src", $(this).attr('data - iframe - src'));
});
I only need to get the variables from the data-iframe-src and use them in the iframe, but I'm not able... The problem is that I load elements in different pages, so I don't know how this affect to the URL variables.
I've founded a simple solution for my problem here and it works for me.
First of all I put this simple iframe in my PAGE-2:
<iframe id="frame" src="" width="100%" height="auto" frameborder="0" scrolling="yes"></iframe>
Then in PAGE-1 I've used this type of links:
https://myappwebsite/page-2?shopId=1234&type=image&max-levels=1&point=A
So now my PAGE-2 loads properly with these params in the URL. Then I've used this simple snippet in Javascript to fill my iframe in PAGE-2:
<script type="text/javascript">
$( document ).ready(function() {
$("#frame").attr("src", "https://myappwebsite/resourcesiframe" + window.location.search);
});
</script>
And it works! Now I can go to PAGE-2 with all my params, pick them and use them in SRC inside the blank iframe.
Thanks for getting me in the correct path!
I have an iframe like
<iframe id="Frame1" name="Frame1" style="width: 810px;overflow:hidden;height:525px;border:none;"src="templates/template1.html">
</iframe>
When I click generate button
the generate function will call.In generate function i changed the src of the iframe to template2.html.
<input type="button" id="btngenerate" onclick="Generate();"/>
<a id="print" onclick="OnPrint();">Print</a>
When I click on the print link after clicking the generate button,I want to print the iframe.
function generate()
{
var billPath = "templates/template2.html";
$("#Frame1").attr("src", billPath);
}
function onPrint()
{
window.frames["Frame1"].window.focus();
window.frames["Frame1"].window.print();
}
It works in Firefox. But not in chrome.
In chrome the template1.html will be printed.I want to print template2.html.
When I call window.print(); it will print the whole page.
Please help me...
Is it possible for you to use a separate window to print your content (like I described here https://stackoverflow.com/a/23281929/701869) ?