将元素附加或添加到页面正文
Posted
技术标签:
【中文标题】将元素附加或添加到页面正文【英文标题】：Append or Prepend Elements to the Body of a Page 【发布时间】：2012-09-19 11:58:26 【问题描述】：我正在尝试从content_script 向页面正文注入一个 div。我用下面的代码试了一下：
方法一：
$('body').prepend('<div id="topbar"></div >');
方法2：
$('html:not(:has(parent)) > body:first').prepend('<div id="topbar"></div >');
// Several other similar approaches.
但这里的问题是，它将这个 div 注入到所有发现的主体它（jquery 选择器）中。 即如果一个页面包含一个iframe，那么这个 div 也会被注入到它，因为 ifrmae 包含一个正文。
实际上，上面显示的Approach 2 在普通脚本/网络文件中运行良好，但在chrome 的content_script 中却不行。请帮我解决这个问题。
content_script：
var jqueryScript = "javascript/References/jquery-1.7.min.js";
var topBarPage = "TopBar.html";
// Handle the requests.
chrome.extension.onRequest.addListener(function(request, sender, sendResponse)
if(request.method == "dockPopup")
injectPopupToPage();
sendResponse();
else if(request.method == "undockPopup")
removePopupFromPage();
sendResponse();
else
sendResponse();
);
// Add the popup/topbar to page
function injectPopupToPage()
// Create script element
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = chrome.extension.getURL(jqueryScript);
// Append jquery to page header.
$('head').append(script);
// Move the page down. >>>>>>>>>>>> Tried with various ways with no luck!!!!
$('body').css('marginTop','39px');
$('body').css('padding-top','64px');
// Append the top bar to page.
$('body').prepend('<div id="topbar"></div >');
$('#topbar').load(chrome.extension.getURL(topBarPage));
$('#topbar').css(
'background-color': '#FBC619',
'position':'fixed',
'left':'0',
'top':'0',
'width':'100%',
'z-index':'9999'
);
// Remove the Popup/Topbar from page.
function removePopupFromPage()
$('#topbar').remove();
$('body').removeAttr('style');
manifest.json
"name": "Inject",
"manifest_version": 2,
"version": "0.0.0",
"description": "Inject.",
"browser_action":
"default_popup": "Popup.html"
,
"permissions": [
"tabs",
"chrome://favicon/",
"http://*/*",
"https://*/*"
],
"content_scripts": [
"matches": ["http://*/*"],
"js": ["Javascript/References/jquery-1.7.min.js","Javascript/content_script.js"],
"run_at": "document_start",
"all_frames": true
],
"web_accessible_resources": ["TopBar.html","Javascript/TopBar.js","Javascript/References/jquery-1.7.min.js"]
【问题讨论】：
请将您的扩展代码以明文形式放在 Stack Overflow 上。如果大小太大，请尝试将代码减少到SSCCE。如果同样失败，请尝试 pastebin.com 或 pastie.org 是否有特定的浏览器让您遇到这种行为？我尝试在 Chrome 中带有 iframe 的页面上选择$('body')，但我只得到了一个身体，而不是两个。
@RobW - 用代码更新了问题。
@ChrisPratt - 我只在 chrome-extension 中遇到这个问题。如果我在chrome-console 或任何其他普通网页中编写类似的选择器，它就可以正常工作。
@Knvn 我怀疑您使用"all_frames": true 注入代码，如果您只想在***框架中执行代码，这应该是错误的。确保manifest.json 包含在您的问题中，因为此文件的内容很重要。
【参考方案1】：
你可以试试：
$(document.body).prepend('<div id="topbar"></div >');
由于您直接引用主文档（您需要向下遍历以获取 iframe 的主体），因此它实际上无法选择除主 <body> 元素之外的任何内容。事实上，你没有选择任何东西。您只是将 jQuery 对象机制包装在常规的旧 JS 对象周围。
如果你仍然有问题，我不知道该告诉你什么。
【讨论】：
【参考方案2】：正如Rob W 在评论中指出的那样，我需要在manifest.json 文件中设置all_frames false。
这是修改后的 manifest.json 文件：
"name": "Inject",
"manifest_version": 2,
"version": "0.0.0",
"description": "Inject.",
"browser_action":
"default_popup": "Popup.html"
,
"permissions": [
"tabs",
"chrome://favicon/",
"http://*/*",
"https://*/*"
],
"content_scripts": [
"matches": ["http://*/*"],
"js": ["Javascript/References/jquery-1.7.min.js","Javascript/content_script.js"],
"run_at": "document_start",
"all_frames": false
],
"web_accessible_resources": ["TopBar.html","Javascript/TopBar.js","Javascript/References/jquery-1.7.min.js"]
【讨论】：
+1-ed 这个答案，-1-ed 另一个，所以这个答案显示在最上面。【参考方案3】：$('body:first').prepend('<div id="topbar"></div >');
$('body').first().prepend('<div id="topbar"></div >');
$('body').eq(0).prepend('<div id="topbar"></div >');
all 为您提供第一个 body 元素。
【讨论】：
尝试了所有这些...仍然是相同的结果！以上是关于将元素附加或添加到页面正文的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Jquery 或 Javascript 定位附加元素，或者如何将该附加元素添加到 DOM？