<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<iframe id="frame" allowfullscreen="allowfullscreen" frameborder="0" style="height: 300px; width: 100%">
</div>
<script type="text/javascript">
console.log("test");
</script>
<body>
</html>
Here, I have placed the JS codes at the bottom of the page. And the result is it's eaten. If I remove the iframe element, the codes work fine. Evidently, the iframe I place here is an empty one without linking to any source. Hence, no other inline JS codes are brought in. BTW, if I put scripts in the head block, they work fine too.
I really don't know WHY? Could anybody give me some comments?
Use a validator (such as http://html5.validator.nu/ or http://validator.w3c.org). The biggest problem you have is that you're not closing the iframe with a </iframe> tag. Anything between iframe tags will only show for clients who have iframes disabled.
Final code should look like:
<iframe id="frame" allowfullscreen="allowfullscreen" frameborder="0" style="height: 300px; width: 100%">
This page requires iframes... blah blah.
</iframe>
In the future, always validate when you're not 110% sure.
Related
I need to load an html page inside a div in the following pseudo page:
<html>
<head></head>
<style>
body {
background-color: yellow;
}
</style>
<body>
<div style="display:none">
<html>
<head></head>
<style>
body {
background-color: blue;
}
</style>
<body>
<div style="display:none">
...
</div>
</body>
</html>
</div>
</body>
</html>
What naturally happens in this code is that the background will turn blue, as it is being changed in the middle of the page. Is there a way to isolate this div? So it would act similarly to an iframe. The content inside the div is stored in a variable, so I think I cannot use a frame, as the html code is not stored in a file to use it as a source.
Thank you!
This is just wrong.
An HTML document can only have one html tag and one body tag, otherwise it will be an invalid document, browsers won't allow it.
If you load an iframe, instead, it will have his own #document and it's fine.
You can not load a Site into a Site without an Iframe due to security risks.
The only thing you can do, is to load the external Site with a serverside script like php, cut of the head with regexp and send the rest to your site into your div.
I have a page which has an iframe element inside it. This iFrame contains two levels of document inside it.
Here is the short version of code (removed most of stuff as otherwise it would be too big)
<iframe src="some soruce" width="863" height="486" frameborder="0" scrolling="no">
<html>
<head>...</head>
<body>
<iframe id="player" src="some source" width="863" height="486" frameborder="0" scrolling="no">
<html>
<head>...</head>
<body>
<div id="mediaplayer_wrapper" style="position: relative; width: 863px; height: 486px;">
<object type="application/x-shockwave-flash" data="/new-flash-player/player.swf" width="100%" height="100%" id="mediaplayer" name="mediaplayer" tabindex="0"></div></div>
<div id="banners_area" style="position: absolute; top: 0px; left: 0px; width: 863px; height: 486px; display: none; background-color: white;">
<br>
</div>
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
What I am trying to do, is to access via jQuery the mediaplayer object and trigger a function on it. I have tried the following:
var p = jQuery("mediaplayer");
p.hideGate();
and also
var p = $("#iFrame").contents().find("#mediaplayer");
p.hideGate();
but none of them have worked. (gave me an error that hideGate is not defined. However when under developer I switch myself to the content of that particular player, and execute the very first code, it suddenly works.
What am I doing wrong here? How come I cannot trigger the function?
hideGate is not a standard jQuery method. It must be provided by a plugin.
You have multiple documents, and that plugin is loaded into the version of jQuery that is in the framed document with the #mediaplayer element in it.
When you call jQuery from the parent frame, you are using the version of jQuery there … which doesn't have the plugin installed.
You can probably solve this by loading the plugin script into the document in the parent frame.
Failing that, you would need to call the jQuery function from the document in the frame. (Possibly $("#iFrame")[0].contentWindow.jQuery("#mediaplayer") would do that, but I don't have time to write a test case to be sure right now).
Perhaps you want to try the .contentWindow property as shown in: http://www.w3schools.com/jsref/prop_frame_contentwindow.asp
Hope it helps.
I must check the change of a tag in an iframe in another webpage (with the same domain). I have this index.html:
<html>
<body>
<iframe id="open_app" src="/sign.php" width="800" height="600" frameBorder="0" scrolling="no" ></iframe>
</body>
...
and this is the tag in sign.php that I want check for change:
<div id="status"></div>
Now, I have always used the MutationObserver for check the change of a tag in a webpage but I now I can not do the same to test the iframe tag with the id status. I've already seen all the related discussions on Stackoverflow but nothing works. What is the best way to verify the change of the iframe tag with the MutationObserver? Thanks.
I have a website where all the navigation happens inside of an iframe. all the pages are locally stored on the server.
a reduced version of the html code is:
>> index.php
<html>
<head>
</head>
<body>
<table><tr><td>
<iframe src="link.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
<td>
<img src="pic.jpg">
</body>
</html>
Note the img is inside the main page. However, I want this image to change based upon what link is navigated to inside the iframe.
Right now I am using php GET to determine what page has been navigated to, but that is not a great solution because all the user has to do is tinker with the link and the desired image disappears.
eg:
<?
$locate = $_GET['locate'];
?>
<html>
<head>
</head>
<body>
<table><tr><td>
<? { if ($locate =="link") {
echo '<iframe src="link.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
<td>
<img src="pic.jpg">';
}
?>
</body>
</html>
The link inside the iframe page is:
http://example.com/index.php?locate=link
What I would like to do is somehow have the parent page holding the iframe to recognize what page is inside of the iframe and make the display of the image contingent on that instead of the hack above. I think that would be a more reliable way and not subject to the user manipulating the link.
As an aside, if there is a way to GET 'locate' in the link w/o the link showing in the address bar, that might be a compromise. But as far as I know, that can't be done.
====
EDIT
I found this:
document.getElementById("iframe_id").contentWindow.location.href
But I am not sure how to implement it.
I tried
<script>document.write(document.getElementById("vframe").contentWindow.location.href );</script>
in the body and the head ...
but the iframe link is not displayed
i tried this:
<html>
<head>
<script>
function getLink()
{
var x=document.getElementById("vframe").contentWindow.location.href;
}
</script>
</head>
<body>
<iframe src="start.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
</body>
</html>
But if it is supposed to work, i can't figure out how to 'read' the result of var x ...
i tried this:
<html>
<head>
</head>
<body>
<iframe src="start.php" width=599 height=350 frameborder=0 scrolling=no id="vframe"></iframe>
<script>document.write(document.getElementById("vframe").contentWindow.location.href);</script>
</body>
</html>
but the result is "about:blank". If I place it in the head or above the iframe there is no result ...
I am trying to get the first paragraph from the website below and display it in an iframe.
Can you correct my code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var iframe = document.getElementById('iframe');
$(iframe).contents().find("<p>").html();
</script>
</head>
<body>
<iframe name="iframe" id="iframe" src="https://www.baronaonlinepoker.com/blog" scrolling="yes" width="180" height="135">
</iframe>
</body>
</html>
You'd be better to use a DIV and use XMLHTTPRequest to set the innerHTML
If the browser loads a page from x.com, that page can have a frame whose source is y.com, but the x.com code will not have access to the y.com DOM. This is a cross-domain issue. You can read more here: http://en.wikipedia.org/wiki/Same-origin_policy
Please see my answer here: https://stackoverflow.com/a/19100553/98706
because I think your going about achieving something the wrong way.