I'm trying to hide related videos(youtube iframe) but it seems like it doesn't work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id = "frame_container">
<iframe id="frame" width="800" height="600" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
<button onclick="hide_related()">Hide</button>
</div>
<script>
function hide_related(){
$("#frame_container").contents().find(".ytp-pause-overlay ytp-scroll-min").css("display", "none");
}
</script>
</body>
</html>
You are missing the hashtag on the jQuery selector, it should be `$("#frame_container).
Also, the function .contents() only looks at the immediate children of the jQuery object/s obtained.
From the jQuery documentation:
Given a jQuery object that represents a set of DOM elements, the .contents() method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements.
<div id = "frame-container">
<iframe id="frame" width="800" height="600"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
<button onclick="hide_related()">Hide</button>
</div>
<script>
function hide_related() {
$("#frame-container").find(".ytp-pause-overlay ytp-scroll-min")
.css("display", "none");
}
</script>
Related
I'm having an auto-generated iframe (Which also have a class name and on the same domain), inside it, there is also a <script> tag and some styling. Can anyone tell me how to remove the script tag and its contents using pure javascript? [NO jQuery please, Using VueJS ]
<html>
<body>
<iframe src="#" class="myiframe">
#document
<html>
<body>
<!-- REMOVE-->
<style>...</style>
<!-- REMOVE-->
<div class="wrapper">...</div>
</body>
</html>
</iframe>
</body>
</html>
I know how to select the script tag (Might not perfect for the purpose), What I don't know is how to select the style tag which is inside of an iframe:
var element = document.getElementsByTagName("style"), index;
for (index = element.length - 1; index >= 0; index--) {
element[index].parentNode.removeChild(element[index]);
}
You can try to use the following code, this code might be lengthy, lets try and optimize that:
<html>
<head>
<script>
function removeStyleTag() {
var iframe = document.getElementById("myFrame");
var styleTag = iframe.contentWindow.document.getElementsByTagName("style");
for (var index = styleTag.length - 1; index >= 0; index--) {
styleTag[index].parentNode.removeChild(styleTag[index]);
}
}
</script>
</head>
<body>
<iframe id="myFrame" src="#" class="myiframe">
#document
<html>
<body>
<!-- REMOVE-->
<style>...</style>
<!-- REMOVE-->
<div class="wrapper">...</div>
</body>
</html>
</iframe>
<button onclick="removeStyleTag()">Try It</button>
</body>
</html>
I have found a reference from this link.
I have just added the following 2 lines in addition to the code that you have written:
var iframe = document.getElementById("myFrame");
var styleTag = iframe.contentWindow.document.getElementsByTagName("style");
Here is a link to Fiddle where I have tried this code.
I want load an iFrame in my div by AJAX. How can I do it?
<button id="iframeload">Load Iframe</button>
<div id="iframe_content"></div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('.iframeload').click(function(event) {
event.preventDefault();
event.stopImmediatePropagation();
$.ajax({
type: "POST",
url : "https://pecom.ru/ru/calc/?iframe=Y",
success : function (data) {
// alert('ok');
$("#iframe_content").html(data);
}
});
});
</script>
This is the iFrame
<iframe id="pecom-kabinet-iframe" allowtransparency="true" frameborder="0" width="800" height="1800" scrolling="auto" style="border: 0;" src="https://pecom.ru/ru/calc/?iframe=Y">Not supported browser< / iframe >
ANd the button #iframeload does not work...
First Error
You are using elements class, not it's id in your code:
<button id="iframeload">
$('.iframeload').click(function(event) {
Second Error
Looks like you want your ajax call to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons.
Possible Solution
However, if you just want to display the iframe content on button click, there is no need for ajax.
just use attr('scr',url)
$( document ).ready(function() {
$('#iframeload').on('click',function(event){
event.preventDefault();
event.stopImmediatePropagation();
var url = 'https://pecom.ru/ru/calc/?iframe=Y';
$('#abc_frame').attr('src', url);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="iframeload">Load Iframe</button>
<div id="iframe_content">
<iframe name="abc_frame" id="abc_frame" src="about:blank" frameborder="0" scrolling="no"></iframe>
</div>
I think the below code helps you. You need to change
$('.iframeload')
To
$('#iframeload')
because you're using element ID not class
the complete code is below
$('#iframeload').click(function(event) {
event.preventDefault();
event.stopImmediatePropagation();
$.ajax({
type: "POST",
url : "https://pecom.ru/ru/calc/?iframe=Y",
success : function (data) {
// alert('ok');
$("#iframe_content").html(data);
}
});
});
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<button id="iframeload">Load Iframe</button>
<div id="iframe_content"></div>
The above code does not work because of the API
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#iframe').attr('src', 'https://www.qries.com');
});
</script>
</head>
<body>
<iframe id="iframe" name="myIframe" frameborder="5" width="500" height="300"></iframe>
</body>
</html>
Is it possible to execute inline JavaScript code on src attribute of an existing IFrame (function that do some logic and return an url ) ?
When I try the code, I get the error : Uncaught ReferenceError: hello is not defined
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript">
var hello = function(src1){
// some logic goes here
return "www.mysite.com";
}
</script>
</head>
<body>
<iframe width="400" height="400" src="javascript:hello()" >
</iframe>
</body>
</html>
The call to hello() is is executing inside the iframe ( because 'javascript:hello()' is the iframe SRC)
But the function 'hello()' is declared outside the iframe in the parent window, in which the iframe is embedded.
You can either call parent.hello() in your iframe src, or declare the body of hello() in the iframe src before calling hello(). The following demonstrates both methods :
<script>
var hello = function(){
alert('hello from outside the iframe');
}
</script>
<iframe width="400" height="400" src="javascript:var hello = function(){alert('hello from inside the iframe')};hello();parent.hello()"></iframe>
You can see it in action here:
https://fiddle.jshell.net/vtdc1qxf/3/
You can't put inline javascript in src attribute. You can use onload event for this. Use the code below
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript">
var hello = function(src1){
// some logic goes here
return "mysitename.com";
}
</script>
</head>
<body>
<iframe width="400" height="400" onload="this.src = hello()">
</iframe>
</body>
</html>
Hope this helps you
You could use document.write.
<body>
<script type="text/javascript">
document.write('<iframe width="400" height="400" src="' + hello() + '"></iframe>')
</script>
</body>
Please go thorough below HTML files code. Here I am trying to use toggle function of jQuery. Here my toggle for "content.HTML" page is working perfectly. I need to hide the "topFrame" Completely when I click on any image or button and unhide it when I click on it again.
Please help me where I've made mistake. I've tried a lot to accomplish this but I am not able to do.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frameset Example Title (Replace this section with your own title)</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<frameset rows="10%,90%" border="0" name="FrameName">
<frame name="topFrame" src="menu_1.html" target="right"></frame>
<frame name="menu" src="content.html" target="_self"></frame>
<noframes>
//....
</noframes>
</frameset>
<script>
$(document).ready(function(){
$("button").click(function(){
$('frame[name="topFrame"]').fadeToggle("slow");
$("#top").toggle();
});
});
</script>
</html>
content.html
<html>
<head>
<title>HTML Frames Example - Content</title>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:30px;
background-color:#ffcc00;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<h1>Content</h1>
<br>
<button id="button1">Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$('button').on('click',function(){
$( "p" ).toggle( "slow" );
$( "h1" ).toggle( "slow" );
});
</script>
</body>
</html>
menu_1.html
<html>
<head>
<title>HTML Frames Example - Menu 1</title>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:10px;
background-color:#ff9900;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function(){
$('img, button').on("click" , function (e) {
$('p').toggle();
});
});
</script>
</head>
<body>
<h3>Menu 1</h3>
<p>White Page</p>
</body>
</html>
Here you have toggle button in content frame and want to hide menu frame onclick of toggle button.
Problem is you cannot access javascript function present in parent from child frame, hence need to do some work-around like below :
Add a event listener in parent and call toggle frame function (frame cannot be hide or show directly using display property of css, hence added two seperate function) :
........
<frameset rows="10%,90%" border="0" name="FrameName">
<frame name="topFrame" src="menu_1.html" target="right"></frame>
<frame name="menu" src="content.html" target="_self"></frame>
<noframes>
//....
</noframes>
</frameset>
<script>
var origCols = null;
function receiveMessage(event)
{
if(origCols!=null)
showFrame()
else
hideFrame();
}
addEventListener("message", receiveMessage, false);
function hideFrame() {
var frameset = document.getElementById("frameSet");
origCols = frameset.rows;
frameset.rows = "0, *";
}
function showFrame() {
document.getElementById("frameSet").rows = origCols;
origCols = null;
}
</script>
</html>
And now write onclick of button like below :
<button id="button1" onclick="parent.postMessage('button1 clicked', '*');">
Toggle 'em</button>
Try using IDs
Here's a short example..
<div><a id="thumbnail">Click here to Show/Hide Thumbnail</a></div>
<div id="showhide"> Your Content to hide or show </div>
<script type="text/javascript">
$('#thumbnail').click(function() {
$('#showhide').toggle();
});
</script>
I have this code
<div id="_right-content-top">
<!-- <iframe src="/ads/banner.jsp" width="160" height="600" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe> -->
</div>
Using jquery or any other method (pure js) I want to assig the value of this div to another div but without the comment, in this way:
<div id="right-content-top">
<iframe src="/ads/banner.jsp" width="160" height="600" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</div>
How Can I achieve this task that work in all the browser ? I thank you any help
As stated in the comment above, the best way to load the ad only once the whole page is loaded is to have the following empty div on your page:
<div id="right-content-top"></div>
and then run this to add the ad to the div once the DOM has loaded:
$(document).ready(function() {
$("#right-content-top").append('<iframe src="/ads/banner.jsp" width="160" height="600" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>');
});
or this to add the ad to the div only after the rest of the page fully loads:
$(window).load(function() {
$("#right-content-top").append('<iframe src="/ads/banner.jsp" width="160" height="600" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>');
});
<html>
<script type="text/javascript">
function move()
{
t = document.getElementById('a').innerHTML.slice(5, -4)
document.getElementById('b').innerHTML = t
}
</script>
<body>
move
<div id="a"><!-- hello world --></div>
<div id="b"></div>
</body>
</html>