This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Invoking javascript in iframe from parent page
what Im trying to do is - load a html page with iframe'd website, and then remove an element of that website, lets call it '#test'
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
</head>
<body>
<iframe src="http://www.google.com"></iframe>
</body>
</html>
Anyone got any ideas how I would go about this? Can't seem to do it in normal .remove() fashion...
Thanks!
if you are in same domain you can use window.parent inside your iframe to load an script and your desired elements and using evaling that script remove the iframe itself
code for inner window aka the iframe:
var myscript = document.createElement('script');
myscript.innerHTML = "var removeIframe = function(){document.body.removeChild(document.body.querySelector('iframe'));}"
window.parent.document.body.appendChild(myscript);
window.parent.eval(removeIframe);
Use .contents().
$('iframe').contents().find('#test').remove();
Related
I am wondering if someone can help me with the "X-UA-Compatible" tag with regards to launching a modal dialog.
I have the following page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title></title>
</head>
<body onload="load()">
<form id="form1" runat="server">
<iframe name="fr1" frameborder="0" id="fr1" width="675px" height="550px"></iframe>
.
.
.
var src = http://someurl.web;
document.all.fr1.src = src;
If I browse directly to this page (not to the http://someurl.web, but the page with the IFrame on it that points at http://someurl.web), the "X-UA-Compatible" stuff will work correctly, however, if I launch my page like below:
window.showModalDialog(urlToPage, "", "dialogHeight: 550px; dialogWidth: 800px; center: Yes;")
The "X-UA-Compatible" stuff is ignored. Why is this? What do I need to do in order to get that tag to be recognized when the page it is on launched via showModalDialog? This is happening when using IE9 on an Intranet site with "Display Intranet site in Compatibility View" Management will not allows to uncheck this, hence the use of the "X-UA-Compatible" tag.
As I understand it, in IE9 (and newer), if a page is launched in an iframe, the document mode will match that of the parent document, regardless of any X-UA-Compatible meta element or server header, unless the parent is using standards mode and the iframe specifies quirks mode. I'm not aware of a workaround.
See http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx for more information.
EDIT: It does work (sorry). Something in this script is causing it to stop in google chrome:
function checkLocation() {
var loc = top.location.href;
var suffix = "subpage.html";
if (loc.indexOf(suffix, loc.length - suffix.length) !== -1) {
top.location.href = "index.html";
}
}
Original post:
I have IE 9, FF 3.6.3, Chrome (18.0.1025.151) and Safari 5.1.5 all installed.
This works in all of the browsers except google chrome.
I have a HTML layout which contains a named iframe. The iframe src changes to display the different pages. On one of the pages I have a script which is loaded onLoad in the body tag. This script doesn't load when the page is loaded in the iframe in google chrome only - it works fine in other browsers. Also, if I load the page directly into google chrome (not via an iframe) it works just fine.
How do I fix this?
Here is an example code:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title> Example Page </title> </head>
<body> View subpage<BR/>
<iframe name="targetFrame"> </iframe>
</body>
</html>
subpage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title> Subpage </title>
<script type="text/javascript" src="subpage.js"> </script>
</head>
<body onLoad="initialise()"> Hello </body>
</html>
subpage.js
function initialise() {
alert("Script loaded.");
}
Thanks for looking.
Turns out its just a security exception
Unsafe JavaScript attempt to access frame
with URL file:///C:/Users/.../website/index.html
from frame
with URL file:///C:/Users/.../website/subfolder/subpage.html.
Domains, protocols and ports must match.
Once its online it should be fine.
Was wondering how I can reload an iframe every x seconds, perferably not using javascript.
Thanks.
With a Refresh: x HTTP header or with an HTML element in the document loaded into the iframe:
<meta http-equiv="refresh" content="x" />
This element should be placed inside of the document's <head/> element.
If you do not have control over the document loaded into the frame or the server that it is served from, you have two options:
JavaScript.
Write another HTML page with the above <meta/> element and include an iframe in that page targeting the other page. So you will have an iframe inside an iframe: outer document -> iframe(inner document with meta-refresh) -> iframe(original iframe target)
EDIT: Regarding option #2, here's a decent generic iframe in PHP that gives some flexibility in terms of refresh time and style. Just call it with something like:
http://www.mydomain.com/genericIframe.php?url=http://my.domain.com/mypage.htm&refreshTime=60&style=putYourStyleAttribHere
Here's the PHP/HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Generic Iframe</title>
<meta http-equiv="refresh" content="<?php print $_REQUEST['refreshTime']; ?>" />
</head>
<body>
<iframe src="<?php print $_REQUEST['url']; ?>" style="<?php print $_REQUEST['style']; ?>"></iframe>
</body>
</html>
If i add the Js Script above This Line <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Then CSS Is not working. Is There is any way to solve this issue
<script type="text/javascript">
<?php $data3 = getmaildata(); ?>
var collection = [<?php echo $data3; ?>];
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>.:: sample ::.</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
A script element can appear in the head or in the body, it can't appear before the Doctype and no element can appear outside the root element (<html>).
If the Doctype (with a couple of provisos which don't apply in this case) isn't the very first thing in a document then browsers will enter Quirks mode (and emulate bugs seen in older browsers with CSS and DOM handling).
There is no way around this (that is well supported by browsers), so just write valid code and don't try to put a script element somewhere that it isn't allowed.
<script> tags are usually placed in <head> or just before </body>, I don't know if it's related but your code is still invalid.
What happens if you put the SCRIPT element in its proper place, inside the HEAD section or in the BODY?
Also, I don't know what $data3 contains, but if it's a string and not an integer for instance, then it should be encapsulated in quotation marks.
The doctype declaration should be the very first thing in an HTML document, before the tag.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.
http://www.w3schools.com/tags/tag_DOCTYPE.asp
I have been playing around with Scala/Lift/Comet/Ajax etc. recently. I came across a problem which boils down to this:
Summary
I want to update a specific div (by id) when a certain event occurs. If the div does not exist yet, it must be created and appended to the HTML body.
Currently I cannot get this to work when using the Lift framework.
Source File
LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
updateOrCreateMouseDiv('123', 'coords')
});
function updateOrCreateMouseDiv(uniqueId, coords) {
if ($('#mouse_'+uniqueId).length == 0) {
$('body').append('<div id=' + uniqueId + '>' + coords + '</div>');
}
$('#mouse_'+uniqueId).html(coords)
}
// ]]>
</script>
</head>
<body></body>
</html>
The Error
If I open the above file directly in a browser (file:///LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html) it works i.e. a new div is created.
But if I run it through Lift/Jetty (http://localhost:8080/static/mouseViewTest) I get the following JavaScript error:
Chrome:
Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7
Firefox (Firebug):
An invalid or illegal string was specified" code: "12
Comparing the Sources in Browser
When comparing the page sources in the browser, I can see only one difference, namely: Lift adds the following JavaScript just before the closing </body> tag:
<script type="text/javascript" src="/ajax_request/liftAjax.js"></script>
<script type="text/javascript">
// <![CDATA[
var lift_page = "F320717045475W3A";
// ]]>
</script>
Questions
Does anyone have an idea why this happens?
If I would want to move the JavaScript code into the Scala file (using Lift's JavaScript and jQuery support), what would the code look like?
Please note: When I used Jq("body") ~> JqAppend() to create new divs, it worked. I just didn't know how to check whether the div id already existed. Thats why I moved the code into the template, planning on using Lift's Call function to execute the JS function. And thats when these problems started...
Thanks!
I recently ran into a similar problem and, from what I've gathered, the problem is because the page when served by lift is served as XHTML and there are some issues when writing to the DOM if the page is XHTML vs. HTML. I don't know whether this is a bug with jQuery or Safari or if it's just something that's not possible in XHTML, but a quick way to fix it is to modify your Boot.scala to tell Lift to not use XHTML as the mime type with this line:
LiftRules.useXhtmlMimeType = false