I'm trying to manipulate DOM elements in the background. What I want to, is to have a YouTube player in the background.html file, which can be manipulated in the popup.html file. However, I'm stuck on how to actually manipulate elements in the background.
background.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Bogus</title>
</head>
<body>
<iframe id="youtubeContainer" height="480" width="480"></iframe>
</body>
</html>
It seems as though, if you want to interact with your background page, you're dealing with a call to chrome.extensions.getBackgroundPage(). However, I'm quite unsure on how to access the DOM once the backgroundPage has been accessed. Hope someone can help!
Related
I've a simple web-application, which consists of 3 simple pages
a.html
b.html
c.html
<!-- a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
<!-- b.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
a.html
<br />
c.html
</body>
</html>
<!-- c.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
As can be seen from the above code, a.html has a link to b.html, b.html has a link to both a.html & c.html and finally, c.html has a link to b.html.
All of the pages will be hosted on the same domain, and I want a very simple thing. All I want is to execute a callback whenever browser's back/forward button is pressed (specifically before navigating to the new page), and in the callback I want the page to which we'll be navigating. And I don't want to update the browser's history while achieving the above (I don't want to ruin the user's experience, updating browser-history will result in unexpected navigation for the user)
The solutions that I tried:
performance.navigation.type
performance.navigation.type == 2 can be used, but it doesn't distinguishes between back and forward button. So it's not of much use for me. Is there any way to distinguish the back and forward button press here?
I don't want to distort this.window.history so that I can get a callback on onpopstate (refer this). Distorting the windows history means ruining the user-experience. Can this be done without distorting the windows history?
I know that using window.history object, I can't find the URL to which the forward/back button will navigate to. (This is because of security). But provided that all of my pages are on the same domain, can I somehow get the url to which fwd/back button will be taking me to. I'm mostly concerned about b.html. While I'm on b.html the forward/back button can take me to either a.html or c.html, how do I detect this before actual navigation happens, so that I can get a callback at this point and execute it.
I tried using JQuery-Mobile but was stuck and posted it as a separate question. Though I'm not sure how JQuery Mobile achieves it and if it will distort the browser's history.
I tried using React-routers, but they are more suited for a single-page-application, and so not much help from there also. Can this be done using any react-concepts?
For the simple html and js code snippet, the action differ from firefox and chrome.
The simple html and js code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<head>
<title>test welcome</title>
<script>
document.write("welcome1")
alert("welcome2")
</script>
<body>
<h3>welcome3</h3>
</body>
</head>
</body>
</html>
1.Open it with firefox.
To click the ok in alert.
The executing order is : welcome1 ,welcome2,welcome3.
2.Open it with chrome.
To click the ok in alert.
The executing order is : welcome2 ,welcome1,welcome3.
Why chrome parse the simple html and js code that way?
How to make chrome behave such the same way as firefox do?
All browsers will stop execution when an alert is encountered, however, Firefox will not halt rendering for alerts. This is primarily due to the vagueness of the standard, ECMA, who writes the ECMAscript standard (upon which Javascript is built) does not mention window.alert(), as it is specific to Javascript, meaning browsers are free to implement it however they like, and they do.
You can force the popup to occur after page load with something like this <body onload="window.alert('Hello World')">, or using the defer attribute.
I have simple page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
Text
</body>
</html>
I need to change title (browser tab) background color.
I tried it:
<meta name="theme-color" content="#ef2c1a">
And another way:
<style>
title{
background-color: red;
}
</style>
But it doesn't work.
What another ways are?
Please, help me to solve it, thanks
You can't.
Let me elaborate: your meta tag is correct and should work - on Chrome for Android.
In other words, this is a feature specific to only one browser for one OS. It is not part of the standard and will therefore not work elsewhere (yet). The only solution is to accept the fact that this will only have an effect for some of your users.
Edit: It looks as if Windows Phones support a similar feature, msapplication-navbutton-color as pointed out in this answer. Note, however, that this doesn't seem to color the tab itself, but just the forward and back buttons. And you're still out of luck otherwise, for example on desktop.
When i try to use the following code to load facebook or you youtube into iframe tags nothing is happened. page isn't loaded into iframe tag
this problem occurs with multiple sites such as youtube, stackoverflow and facebook
code:
<head>
<title>HTML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>Below is an iframe.</p>
<iframe src="http://www.youtube.com/" width="400" height="150">
<p>iframes are not supported by your browser.</p>
</iframe>
</body>
</html>
any help please
I tried it
http://jsfiddle.net/KPk6n/1
And looking at the console, I get
Display forbidden by X-Frame-Options
So I think those sites disallow framing, there probably is a workaround to this, but I'd say you should respect them and not frame them
The sites you speak of probably disable access from iFrames.
My site works just fine in this example: http://jsfiddle.net/3vxvm/
I'm having a problem with Javascript not executing when placed in the HEAD section of an HTML page in the Safari browser. It works fine in IE, Chrome and Firefox, but with Safari I have to move it down to between the and tags.
Anyone know if this is a known issue?
PS. The HTML and Javascript is contained in .PHP files, if that makes a difference.
Update:
Code I'm using to 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>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
alert("In HEAD Tag");
</script>
</head>
<body>
<div id="innerthumbcontainer">
Test
</div>
</body>
</html>
If I open the page containing this directly it seems to work. But as soon as I load this into a DIV from another page it does not fire in Safari. In all the other browsers it does work though.
I think I would have heard about it if that was a general problem, you probably have a syntax error in your HTML or something, which for some reason makes Safari give up. Post your code, preferably the HTML output, and we'll have a chance of telling you what is wrong.
Edit: As far as I understand you are trying to use a complete HTML page as content for a div, you really can't do that. Depending on what exactly you are trying to achieve you could either use an iframe, or you could cut out the html, header and body tags.