Changing CSS of element inside an iframe using data attribute - javascript

I have an iframe inside my HTML document. This iframe has the data attribute "data-search-id" which is "mainline-top". How do I use JavaScript outside the iframe to change the color of the element with class "base-top". Should I use the data attribute or is there another way? Note I can't add an id or class to the iframe, it is being loaded from somewhere else.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js "integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<body>
<iframe data-search-id="mainline-top">
<style>.base-top{color: #red;}</style>
<div class="base-top">Stuff</div>
</iframe>
<script>
$('.base-top.).css(color, "blue");
</script>
</body>
</html>

You can insert style tag into iframe.
<iframe data-search-id="mainline-top" id="myIframe">
<style>.base-top{color: red;}</style>
<div class="base-top">Stuff</div>
</iframe>
<style type="text/css" id="mycss">.base-top{color: blue;}</style>
<script type="text/javascript">
$(function () {
$('*[data-search-id="mainline-top"]').contents().find("head")[0].appendChild(mycss);
});
</script>

Related

load another html file as a popup before loading the actual html file

if i have the following html file like index.html
<html>
<body>
<div>
<p>Sample html</p>
</div>
</body>
</html>
and consider i have another html page named example.html
before loading the index.html i need to load this example.html as a popup. how is it possible
Just write the following code in index.html file
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body onload="myFunction()">
index Page
<script>
function myFunction(){
var myWindow = window.open("example.html", "", "width=700,height=500");
}
</script>
</body>
</html>
And create an another html file called example.html in the same directory. Whenever open the index.html page the example.html file will open itself in a popup window
It's better to put your example.html codes inside the div tags for responsiveness and clean instead of iframe but here I used iframe for your question.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<iframe src='example.html' width='600' height='350'> </iframe>
</div>
</body>
</html>
Reference link : http://jqueryui.com/dialog/

I have Css override issue on my plugin

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme/myjquerystyle.css">
</head>
<body>
<iframe>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="plugin/myjquerystyle.css">
</head>
<body>
My Plugins page
</body>
</html>
</iframe>
</body>
</html>
As you can see above code i have create a html page inside the html page.
My problem is that theme/myjquerystyle.css override my plugin/myjquerystyle.css
How can I give a priority to my plugin/jquerystyle.css file apply to my page.
Any solution
I believe we cannot define inside iframe (never tried so) however we can acheive this via Javascript where we can append styles to iframe section via:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .myclass{display:none;} </style>"));
});
Else you can also try by adding styles to individual elements inside
iframe as:
iframe.$('mydiv').addClassName('Tablewithborder');
Hope it helps.

jQuery: Get iFrame Object from within an iFrame

I have an iFrame (without id and name)
<iframe src="abc.jsp" scrolling="no" height="100" width="100%"></iframe>
I need to get the iFrame Object from within an iFrame to apply css. If there is a name, I could do window.name, but, there is no Id and name. So, is there a way to get iFrame object?
You can use .contents() to change css in iframe
read http://api.jquery.com/contents/ example.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contents demo</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<iframe src="//api.jquery.com/" width="80%" height="600" ></iframe>
<script>
$( "iframe" ).contents().find( "a" ).css( "background-color", "#BADA55" );
</script>
</body>
</html>

jQuery slideDown script not working in simple code example

<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
</style>
<script type="text/javascript">
$(document).ready(function {
$('img').slideDown('slow');
});
</script>
</head>
<body>
<img src="images\sjmak-music-logo.jpeg"/>
</body>
</html>
The simple code example above is not working; I am attempting to simply make the image slide down from the top of the screen but it stays static. I also attempted to use 'display: none' on the image, but the image remains hidden instead of sliding down from the top.
You need to include jQuery library file to use jQuery methods.
In the below sample a jquery cdn version is added. Also to slide down an image it has to be hidden first
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').slideDown('slow');
});
</script>
</head>
<body>
<img src="images\sjmak-music-logo.jpeg" style="display: none"/>
</body>
</html>
Demo: Fiddle

Using jQuery inside iFrame not working

I have a problem using jQuery inside an iFrame.
Here is my test setup:
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#A").contents().find('#B').addClass('Z');
});
</script>
</head>
<body>
<iframe id="A" src="test.html" style="width:700px; height: 1000px;" frameborder="0"></iframe>
</body>
</html>
test.html:
<html>
<head>
<title>test</title>
</head>
<body>
<div id="B">testcontent</div>
</body>
</html>
Normally when the page is loaded, in the source, "Z" should be added as a class, but it doesn't. Does anyone have an idea what the problem might be? Both files are in the same (local) folder.
try this
$("iframe").load(function(e){
$(this).contents().find('#B').addClass('Z');
});
You have to run it from a webserver with the HTTP scheme (http:// or https://).
Using the file scheme (file://) prevents this sort of cross frame access in some browsers.

Categories