I want to show external url(like 'https://google.com') in div - javascript

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

Related

Embedding twitch in tumblr issue

I'm currently updating a website for a friend to support on page streaming.
The technology of choice is twitch, and I'm kind of tied to tumblr for the hosting.
So the issue is this, I wrote the code for embedding twitch, plus some css to meet specifications (he wants a gif of tv static on top of the video player while it's not loaded). It works fine in local, but when uploading it to tumblr I get 9 duplicates of the code I'm uploading.
The HTML is organized with sections and articles, the whole thing (player + gif mask) has thus been put into an article to match the layout and exploit the site's native css/js.
Here is the code I'm trying to upload.
<article class="entry fat-TV-container">
<div class="TV-label">
</div>
<div class="media" >
<div id="twitch-player-mask" style="position: absolute; height:1rem; width:100%" >
<img class="test-player-item" src="Content/Static.gif" style="height:500px">
</div>
<iframe
id="fat-TV"
class="test-player-item"
src="https://player.twitch.tv/?channel=fatzrh"
height="300"
width="100%"
frameborder="0"
scrolling="no"
allowfullscreen="true"
position="absolute"
>
</iframe>
</div>
JS
<script type="text/javascript">
document.getElementById("twitch-player-mask").addEventListener("Twitch.Player.ONLINE", function (){
var elem= document.getElementById("twitch-player-mask");
elem.style.display="none";
});
document.getElementById("twitch-player-mask").addEventListener("Twitch.Player.OFFLINE",function (){
var elem= document.getElementById("twitch-player-mask");
elem.style.display="initial";
});</script>
CSS
.player-item {
object-position: center;
padding-left: 28.5%;
padding-right: 28.5%;}
.test-player-item {
object-position: center;
}
.fat-TV-container:hover #twitch-player-mask
{
display: none;
}
Do you have any idea about what's wrong with either the code or tumblr?
EDIT: Solved.
For further reference, if somebody stumbles into the issue, try putting whatever you're adding to tumblr's html outside the {Block:Posts}{/Block:Posts} tags, since otherwise it's gonna apply the code to all the posts in the page.

How do I make a frame compatible with anchor

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

calculating dynamic height of webpages for iframe

this is the index.html code..
<body><iframe name="sample" src="first.html" width="100%" height="100%" frameborder="0" id="sample" /></body>
first.html code is...
<body>
<div style="width:100%; height: 1900px; background: yellow;"></div>
<br>
second
</body>
second.html code is
<body><div style="width:100%; height: 1100px; background: blue;"></div>
<br>
first</body>
Now what i want is to make the index page render the whole first.html and second.html in full-height. somehow the iframe height must adjust to the corresponding height of webpage it is holding.
How to do this?
Dealing with iframe dimensions can be a bit of a pain. This isn't exactly an answer, but hopefully it will point you in the right direction.
Are you the author (or do you have access to the author) of the iframe? If so a solution like this should work.
I'd also give this library (or one of its 58 forks) a look over for some inspiration. In my experience, the post-message API has been useful when working with iFrames, which is what the library above is build on top of.
Hope that helps!

How to make a div of iframe float on top of another div of iframe that should be the background of the page

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

Control styling of elements within iFrame

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

Categories