im not sure if this is possible or not, but im trying to alter the style of elements contained within an iFrame using javascript.
I have tried the following which I believed in theory should work with no luck...
<script>
function click() {
window.frames[0].document.getElementById('daLink').style.backgroundColor="#000";
}
</script>
<a href="#" onclick="click()" >Test</a>
<iframe src="http://www.google.co.uk" width="600" height="400" id="daLink"></iframe>
That will only work if the iFrame Source is on the same domain.
Your code is not working due to the same-origin-policy!
Read more here: Javascript Security
Related
I want to show external url(like 'https://google.com') in div widthout using iframe. So referenced this.
<div>
<object type="text/html" data="http://validator.w3.org/" width="800px" height="600px"
style="overflow:scroll; border:5px ridge blue">
</object>
</div>
It is working well, but when I change data attr to what I want url(ex: 'https://www.google.com'),
it is not working. The area shows nothing. (also, .load() not working)
<div>
<object type="text/html" data="https://www.google.com/" width="800px" height="600px"
style="overflow:scroll; border:5px ridge blue">
</object>
</div>
I use this.
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
I want a solution to this problem.
and if the solution is different in control through jquery, i would like to know that as well.
I have been wandering for five hours about this. Please help me.
The website you want to show probably does not allow this with the X-Frame-Options header:
Sites can use this to avoid click-jacking attacks, ...
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
This is so you cannot simply steal any website and give it a different design, for example.
If you are actually talking about Google and that wasn't just an example, you can use this: programmablesearchengine.google.com/about
I have tried to test other questions using StackOverflow, but I couldn't get it to work.
The frame will not scroll to the anchor.
<iframe src="http://coder0.weebly.com/browsers-images.html#B0" width="95%" height="50" target="_parant" id="comfra" frameborder="0" scrolling="no">
<p>Please click here</p>
</iframe>
The id is B0.
The iframe can't be used like that. Please check: What is iframe used for?
You can't add content to an iframe tag like that.
You can check this javascript solution:
Insert content into iFrame
Can someone explain why Facebooks iframe colorscheme not working?
In fact, it does work with Javescript SDK.
Why doesn't it work with Iframe? Have tried to add ( data-colorscheme="dark" ) to the iframe with no succes.
https://developers.facebook.com/docs/plugins/like-button
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FAdamskyMotorkylareAb%2F%3Ffref%3Dts&width=240&layout=standard&action=like&size=small&show_faces=true&share=false&height=80&appId" width="240" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="false" colorscheme="dark"></iframe>
Have tried to add ( data-colorscheme="dark" ) to the iframe with no succes.
Those data attributes are evaluated by the JS only. When you use the iframe version, Facebook has no way to even read that attribute, because it is in a document from a different domain.
For the iframe version, you need to pass it as parameter in the URL:
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.
com%2FAdamskyMotorkylareAb%2F%3Ffref%3Dts&width=240&layout=standard&...&colorscheme=dark" width="240" hei
I built 2 custom google maps for a site and have embeded them with iframes on a mobile site: mobile.moodyplumbingmpi.com The maps do not display the custom map but a map of the Southern Hemisphere when first viewed by taping service areas. If I hit refresh, the correct maps display. Wondering if I am missing some sort of jquery command to display on opening or something like that. I am completely stuck on this. Any help would be greatly appreciated! Mike
Here is the code for the section that displays the maps:
BackMoody Plumbing
<article data-role="content">
<h2>Moody Plumbing Service Area</h2>
<ul data-role="listview" data-inset="true" data-filter="false">
<li>
<h3>Warren Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ"></iframe><br /><small>View Larger Map</small>
</li>
<li>
<h3>Youngstown Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU"></iframe><br /><small>View Larger Map</small>
</li>
</ul>
</article>
<nav data-role="footer">© <script>new Date().getFullYear()>2010&&document.write(+new Date().getFullYear());</script> Moody Plumbing Visit Full Site
</nav>
So your issue is that the iFrames containing the maps are being built while they are hidden. This confuses the Google MapsEngine API which expects the viewport window to be properly sized and visible. When you toggle the iFrame's visibility from the "Service Areas" button, the MapsEngine just plunks down at zoom 1 at lat/lng 0,0.
I think one solution is to dynamically re-set the SRC of the iFrames when the "Service Areas" button is pressed. Change the two iFrame tags to include a unique id:
<iframe id="location1" width="250" height="250" ...
<iframe id="location2" width="250" height="250" ...
Then add a simple script into the HEAD of the HTML document; I didn't think of this, it came from: Reload an iframe with jQuery
<script type="text/javascript">
$(document).on("pageshow", "#locations", function(event, data) {
$('#location1').attr('src', function(i, val) { return val; });
$('#location2').attr('src', function(i, val) { return val; });
});
</script>
The reload is a bit jumpy. So other possible options to consider include:
dynamically trigger a refresh of the iFrames when the "Service Areas" button is pressed; there is code online for this but it does not appear to work in all types of browsers.
Put a couple of DIVs in as placeholders, then use javascript to insert the iFrame HTML as innerHTML of the DIVs.
Find a way to trigger a map RESIZE event [google.maps.event.trigger(???, "resize");] similar to one of the answers in the following link; I don't know if this is possible using the MapsEngine: google maps not displayed correctly unless refreshing
You do need to make sure about the timing of events. The #locations SECTION needs to be completely visible before attempting any of the above to allow the MapsEngine initialization to work properly. You will need to set an event to know when the SECTION has become visible before poking at the iFrames (the jQuery pageshow event does this as provided in the code sample above).
Finally, I'm not sure if you built the maps using Google's MyMaps or using Google MapsEngine. If you indeed used MapsEngine, you need to be aware that Google is terminating the MapsEngine at the end of 2015, and these two maps will become non-operable.
I read many related questions but my case seems a little bit different that none of those really work for me.
What I'm trying to achieve is to have a floating radio player that play nonstop music throughout my blog. I'm using iframe to put my blog as the background of the whole page, then another iframe for the radio player that float on top the previous iframe.
I guess the reason that all methods I found couldn't work is because the property of my iframe:
<iframe src="my blog address" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="120%" width="120%"></iframe>
Following is what the entire page look like(I need the radio player to float on the top):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="radio_player">
<iframe src="http://douban.fm/partner/baidu/doubanradio" frameborder="0"></iframe>
</div>
<div id="blog_background">
<iframe src="http://swotong.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="120%" width="120%"></iframe>
</div>
</body>
</html>
I'm quite new to coding and posting questions here, thanks for any help.
Best Regards
try adding z-index:1 to the frame you want on top.
You can see it working here
you have to use a position property for this to work.
position attributes from css3.com